fpd_detection.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. <template>
  2. <view class="uni-container uni-container-bg">
  3. <!-- 搜索框 -->
  4. <uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
  5. <uni-col :span="24">
  6. <view class="u-page__tag-item">
  7. <u-search placeholder="请输入检测项目名称" bgColor="#edf6f9" borderColor="#4cb2b6" v-model="keyword"
  8. :show-action="true" @custom="search"></u-search>
  9. </view>
  10. </uni-col>
  11. </uni-row>
  12. <!-- 下拉框 -->
  13. <view class="u-page__tag-item"
  14. style="margin-bottom: 26upx;width: 700upx;border-bottom: 2px solid #55cbbf;background-color: #f5f7fa;">
  15. <u-form>
  16. <u-form-item prop="orgName" @click="
  17. showOrg = true;
  18. hideKeyboard();
  19. " label="单位选择:" labelWidth="100px">
  20. <!-- <u-picker :show="showOrg" :columns="actions"></u-picker> -->
  21. <u--input border="none" disabled v-model="formData.orgName" placeholder="请选择所属单位"></u--input>
  22. <u-icon slot="right" name="arrow-down"></u-icon>
  23. </u-form-item>
  24. </u-form>
  25. </view>
  26. <!-- 卡片栏 -->
  27. <view v-if="tableData.length>0 && isLoaded">
  28. <view v-for="(item, index) in tableData" :key="index">
  29. <uni-card>
  30. <!-- 标题 -->
  31. <view class="titles">{{ item.detinspect }}</view>
  32. <!-- 简要内容 -->
  33. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  34. <text class="name-align-drill">检测项目:</text>
  35. <text class="conts">{{ item.detinspect }}</text>
  36. </view>
  37. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  38. <text class="name-align-drill">所属单位:</text>
  39. <text class="conts">{{ item.orgName }}</text>
  40. </view>
  41. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  42. <text class="name-align-drill"> 检测维保结果:</text>
  43. <text class="conts max-width">{{ item.detresult.name }}</text>
  44. </view>
  45. <view class="an-niu" @click.native="onClick(item,formData.orgName)" link><text
  46. class="detail">查看详情</text></view>
  47. </uni-card>
  48. </view>
  49. </view>
  50. <!-- tableData为空时显示 -->
  51. <view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
  52. <view class="text-gray" style="padding-top: 20px;" v-if="tableData.length == 0">
  53. <img :src="tan90" alt="暂无数据" />
  54. </view>
  55. </view>
  56. <u-action-sheet :show="showOrg" :actions="actions" title="请选择单位" @close="showOrg = false"
  57. @select="sexSelect"></u-action-sheet>
  58. <!-- 加载中 -->
  59. <isLodingModel></isLodingModel>
  60. </view>
  61. </template>
  62. <script>
  63. var that = '';
  64. import {
  65. createFpdDetection, //创建消防设备维护和检测台账
  66. updateFpdDetection, //更新消防设备维护和检测台账
  67. deleteFpdDetection, //删除消防设备维护和检测台账
  68. getFpdDetection, //获得消防设备维护和检测台账
  69. getFpdDetectionPage, //获得消防设备维护和检测台账分页
  70. exportFpdDetectionExcel, //导出消防设备维护和检测台账 Excel
  71. getOrgId
  72. } from '@/api/fpdDetection/index.js';
  73. import config from '@/config'
  74. import {
  75. DICT_TYPE,
  76. getDictDatas
  77. } from '@/utils/dict';
  78. const baseUrlImg = config.baseUrlImg
  79. export default {
  80. data() {
  81. return {
  82. isLoaded: false,
  83. Group: `${baseUrlImg}/checkActive/Group.png`,
  84. showOrg: false,
  85. actions: [],
  86. // 数据
  87. tableData: [],
  88. id: '',
  89. tan90: `${baseUrlImg}/tan90.png`,
  90. // 每页数据量
  91. pageSize: 10,
  92. // 当前页
  93. pageNo: 1,
  94. // 数据总量
  95. total: 0,
  96. // tableData数据加载中
  97. loading: false,
  98. // 初始化时搜索框的值
  99. keyword: '',
  100. // 存放orgid,orgname
  101. formData: {
  102. orgName: ''
  103. },
  104. show: false,
  105. showtimeStart: false,
  106. showtimeEnd: false,
  107. // 查询参数
  108. queryParams: {
  109. pageNo: 1,
  110. pageSize: 10,
  111. detdate: [],
  112. detinspect: null,
  113. detresult: null,
  114. },
  115. }
  116. },
  117. methods: {
  118. //搜索
  119. search() {
  120. getFpdDetectionPage({
  121. detinspect: this.keyword
  122. }).then(res => {
  123. if (res.data) {
  124. //对检测结果进行初始化
  125. const reArr = getDictDatas(DICT_TYPE.BACKEND_DET_RESULT)
  126. // console.log('reArr',reArr);
  127. this.tableData = res.data.list.map(item => {
  128. const thisItem = reArr.find(par=>par.value === item.detresult)
  129. // console.log('thisItem',thisItem);
  130. if(thisItem){
  131. item.detresult = {id:thisItem.value,name:thisItem.label}
  132. }
  133. return item
  134. })
  135. } else {
  136. this.tableData = []
  137. }
  138. })
  139. },
  140. // 隐藏键盘
  141. hideKeyboard() {
  142. uni.hideKeyboard();
  143. },
  144. sexSelect(e) {
  145. this.formData.orgId = e.id;
  146. this.formData.orgName = e.name;
  147. // 获取培训演练信息详细信息
  148. getFpdDetectionPage({
  149. pageNo: this.pageNo,
  150. pageSize: this.pageSize,
  151. orgId: this.formData.orgId
  152. }).then(response => {
  153. this.tableData = response.data.list;
  154. });
  155. },
  156. //获取表格数据
  157. getData() {
  158. this.loading = true;
  159. getFpdDetectionPage(this.queryParams).then(response => {
  160. if (response.data) {
  161. //对检测结果进行初始化
  162. const reArr = getDictDatas(DICT_TYPE.BACKEND_DET_RESULT)
  163. this.tableData = response.data.list.map(item => {
  164. const thisItem = reArr.find(par=>par.value === item.detresult)
  165. if(thisItem){
  166. item.detresult = {id:thisItem.value,name:thisItem.label}
  167. }
  168. return item
  169. })
  170. // this.tableData = response.data.list;
  171. }
  172. this.isLoaded = true
  173. this.loading = false;
  174. }).catch(err => {
  175. this.isLoaded = true
  176. this.loading = false;
  177. }
  178. );
  179. },
  180. // 传递数据
  181. onClick(val, orgName) {
  182. const navData = JSON.stringify({
  183. ...val
  184. })
  185. this.isLoaded = false
  186. uni.navigateTo({
  187. url: '/pagesA/fire/fpd_detection/detection_details/detection_details?id=' + val.id+'&historyView=historyView',
  188. });
  189. },
  190. },
  191. watch: {
  192. loading: {
  193. handler(newLength, oldLength) {
  194. this.$modal.isLoadingModel(this.loading)
  195. },
  196. immediate: true
  197. }
  198. },
  199. mounted() {
  200. // 执行查询
  201. this.actions = []
  202. getOrgId({
  203. pageNo: this.pageNo,
  204. pageSize: this.pageSize,
  205. userId: this.$store.state.user.id
  206. }).then(response => {
  207. // 取到用户对应的单位名称与id
  208. response.data.map(v => {
  209. this.actions.push({
  210. id: v.dwid,
  211. name: v.orgName
  212. });
  213. });
  214. this.formData.orgName = response.data[0].orgName;
  215. this.formData.orgId = response.data[0].dwid;
  216. this.tableData = []
  217. this.getData();
  218. }).catch(err => {
  219. this.loading = false
  220. this.$modal.msg(err)
  221. })
  222. // this.tableData={}
  223. // this.getData();
  224. // this.getData()
  225. }
  226. }
  227. </script>
  228. <style lang="scss" scoped>
  229. body {
  230. background-color: #f5f7f9;
  231. }
  232. page {
  233. background-color: #f5f7f9;
  234. }
  235. /deep/ .u-tabs__wrapper[data-v-0de61367],
  236. /deep/ .u-tabs__wrapper.data-v-0de61367,
  237. /deep/ .u-tabs__wrapper {
  238. width: 99%;
  239. }
  240. /deep/.u-tabs__wrapper__nav__item[data-v-0de61367],
  241. /deep/.u-tabs__wrapper__nav__item.data-v-0de61367,
  242. /deep/.u-tabs__wrapper__nav__item {
  243. padding: 0 60rpx;
  244. }
  245. .uni-container {
  246. height: 100vh;
  247. padding-right: 20upx;
  248. }
  249. .addInsp {
  250. width: 40px;
  251. position: fixed;
  252. right: 4px;
  253. z-index: 99999;
  254. }
  255. ::v-deep .u-icon__icon {
  256. margin-right: 0px !important;
  257. }
  258. .an-niu {
  259. float: right;
  260. font-size: 10px;
  261. text-align: center;
  262. display: flex;
  263. margin-top: -64upx;
  264. padding-bottom: 30rpx;
  265. // margin-top: 50rpx;
  266. color: #fff;
  267. .detail {
  268. width: 60px;
  269. height: 60rpx;
  270. padding: 0 20rpx;
  271. border-radius: 30px;
  272. background-color: #f7c41e;
  273. margin-right: 20rpx;
  274. text-align: center;
  275. line-height: 60rpx;
  276. font-size: 27upx;
  277. }
  278. .detailDel {
  279. width: 60px;
  280. height: 60rpx;
  281. padding: 0 20rpx;
  282. border-radius: 30px;
  283. background-color: #ff2e31;
  284. color: white;
  285. margin-right: 20rpx;
  286. text-align: center;
  287. line-height: 60rpx;
  288. font-size: 30upx;
  289. }
  290. .solve {
  291. width: 62px;
  292. height: 60rpx;
  293. margin-right: 20rpx;
  294. border-radius: 30px;
  295. background-color: #4cb2b6;
  296. line-height: 60rpx;
  297. }
  298. /deep/ .padding-tb-sm {
  299. padding-top: 0px;
  300. padding-bottom: 10px;
  301. }
  302. .deletes {
  303. width: 62px;
  304. height: 60rpx;
  305. border-radius: 60rpx;
  306. background-color: red;
  307. color: #fff;
  308. line-height: 60rpx;
  309. }
  310. }
  311. /deep/.segmented-control__item--button {
  312. background-color: rgb(76, 178, 182) !important;
  313. }
  314. /deep/.segmented-control__item--button--active {
  315. background-color: #ffffff !important;
  316. }
  317. /deep/.uni-card {
  318. box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
  319. border-radius: 30rpx;
  320. }
  321. .tiantupian {
  322. width: 110rpx;
  323. height: 110rpx;
  324. position: fixed;
  325. right: 15px;
  326. bottom: 80rpx;
  327. }
  328. //列表样式
  329. .titles {
  330. font-weight: 600;
  331. margin-bottom: 10rpx;
  332. color: black;
  333. font-size: 32rpx;
  334. }
  335. .conts {
  336. max-width: 470rpx;
  337. display: -webkit-box;
  338. /*弹性伸缩盒子模型显示*/
  339. -webkit-box-orient: vertical;
  340. /*排列方式*/
  341. -webkit-line-clamp: 1;
  342. /*显示文本行数*/
  343. overflow: hidden;
  344. /*溢出隐藏*/
  345. color: #274647;
  346. text-overflow: ellipsis;
  347. /*不知道干嘛的*/
  348. .conts-title {
  349. margin-right: 10rpx;
  350. color: #728f90;
  351. }
  352. }
  353. .max-width {
  354. max-width: 180upx;
  355. }
  356. /deep/ .u-form-item__body__left__content__label {
  357. font-size: 28upx !important;
  358. }
  359. </style>