index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. <template>
  2. <view class="container uni-container uni-container-bg">
  3. <!-- <uni-section title="" padding style="background-color: #F5F7F9;">
  4. <view class="example-body">
  5. <view class="tag-view" style="display: flex;flex-wrap: wrap;">
  6. <uni-tag style="margin: 5px;cursor: pointer;padding: 5px;" v-for="(item,index) in tagLabel"
  7. :key="index" :inverted="true" :text="item.label" type="primary"
  8. @click="setInverted(item.value,item.rotues)" :class="{bg:item.value==clicKValue}" />
  9. </view>
  10. </view>
  11. </uni-section> -->
  12. <view style="margin-bottom: 20rpx;">
  13. <u-tabs :list="items" @click="onClickItem" activeStyle="color:#4CB2B6" inactiveStyle="color:#000"
  14. :current="current" :scrollable="true" lineWidth="60" lineColor="#4CB2B6"></u-tabs>
  15. <view style="height: 2rpx;background-color: #E5E5E5;margin-top: 10rpx;"></view>
  16. </view>
  17. <component :is="selectedTag" v-if="selectedTag!=''">
  18. </component>
  19. <view class="" v-else-if="fireInspection">
  20. <u-list @scrolltolower="scrolltolower" v-if="tableData.length>0 && isLoaded">
  21. <view class="top">
  22. <view class="">
  23. <u-search placeholder="请输入任务名称" bgColor="#edf6f9" borderColor="#4cb2b6" v-model="taskname"
  24. :showAction="false"></u-search>
  25. <view class="search-time">
  26. <uni-datetime-picker v-model="kewords" type="daterange" @custom="changeLog" />
  27. </view>
  28. </view>
  29. <view class="search-icon">
  30. <u-icon name="search" color="#4CB2B6" size="42" @click="changeLog"></u-icon>
  31. </view>
  32. </view>
  33. <u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
  34. <uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
  35. <uni-col :span="24" class="text-xl font-weight-700" v-if="my==''">{{ item.task_name }}</uni-col>
  36. <!-- <u-badge v-if="item.isdenger==1" :value="1011" numberType="overflow" isDot
  37. customStyle="margin-right:40px" /> -->
  38. <u-icon v-if="item.isdenger==1&&my==''" name="warning-fill" color="#ff5647" size="28"
  39. customStyle="margin-right:20px"></u-icon>
  40. </uni-row>
  41. <uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
  42. <uni-col :span="24" class="text-cut text-grey1">任务介绍:{{ item.insp_name }}</uni-col>
  43. <u-icon v-if="item.isdenger==1&&my!=''" name="warning-fill" color="#ff5647" size="28"
  44. customStyle="margin-right:20px"></u-icon>
  45. </uni-row>
  46. <uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
  47. <uni-col :span="24" class="text-cut text-grey1">详情描述:{{ item.description }}</uni-col>
  48. </uni-row>
  49. <uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
  50. <uni-col :span="24" class="text-cut text-grey1">提交时间:{{ item.inspect_time}}</uni-col>
  51. <!-- <uni-col :span="16" class="text-cut text-grey1">提交时间:{{ item.cutofftime }}</uni-col>
  52. <uni-col :span="8" class="justify-end flex ">
  53. <u-button class="margin-right-sm" size="small" color="#4CB2B6" style="width: 160rpx; "
  54. > 查看 </u-button>
  55. <u-button size="small" color="red" style="width: 160rpx;">删除</u-button>
  56. </uni-col> -->
  57. </uni-row>
  58. <!-- <uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
  59. <uni-col :span="24" class="text-cut text-grey1">
  60. <u-avatar-group :urls="item.url" size="35" gap="0.4" maxCount='5' @showMore="onClick(item)">
  61. </u-avatar-group>
  62. </uni-col>
  63. </uni-row> -->
  64. </u-list-item>
  65. </u-list>
  66. <view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
  67. <view class="text-gray" style="padding-top: 20px;">
  68. <img :src="tan90" alt="暂无数据" />
  69. </view>
  70. </view>
  71. <!-- 加载中 -->
  72. <isLodingModel></isLodingModel>
  73. </view>
  74. </view>
  75. </template>
  76. <script>
  77. let that = null;
  78. import {
  79. getInspecthisPage,
  80. getSelfInspecthisPage
  81. } from '@/api/task';
  82. import {
  83. getInsHisImgurl,
  84. } from '@/api/check_record';
  85. import {
  86. shijianc
  87. } from '@/utils/common.js'
  88. import config from '@/config'
  89. const baseUrlImg = config.baseUrlImg
  90. export default {
  91. components: {
  92. Drill: () => import('@/pagesB/components/drill/index.vue'),
  93. FpdDetection: () => import('@/pagesB/components/fpd_detection/fpd_detection.vue'),
  94. FireSpecial: () => import('@/pagesB/components/fireSpecial/index.vue'),
  95. FireWork: () => import('@/pagesB/components/fireWork/index.vue')
  96. },
  97. data() {
  98. return {
  99. items: [{
  100. name: '消防检查结果'
  101. }, {
  102. name: '检查项培训演练'
  103. }, {
  104. name: '消防设施维护和检测'
  105. }, {
  106. name: '特种作业人员'
  107. }, {
  108. name: '动火审批'
  109. }],
  110. isLoaded: false,
  111. tan90: `${baseUrlImg}/tan90.png`,
  112. // 数据
  113. tableData: [],
  114. taskname: '',
  115. // 每页数据量
  116. pageSize: 20,
  117. kewords: [],
  118. // 当前页
  119. pageNo: 1,
  120. // 数据总量
  121. total: 0,
  122. // tableData数据加载中
  123. loading: false,
  124. statusList: {
  125. 0: '未完成',
  126. 1: '已完成',
  127. 2: '审核中',
  128. 3: '审核未通过'
  129. },
  130. my: '',
  131. title: '暂无数据',
  132. tagLabel: [{
  133. value: 0,
  134. rotues: '',
  135. label: '消防检查结果'
  136. },
  137. {
  138. value: 1,
  139. rotues: 'Drill',
  140. label: '检查项培训演练'
  141. },
  142. {
  143. value: 2,
  144. rotues: 'fpd-detection',
  145. label: '消防设施维护和检测'
  146. },
  147. {
  148. value: 3,
  149. rotues: 'fire-special',
  150. label: '特种作业人员'
  151. },
  152. {
  153. value: 4,
  154. rotues: 'fire-work',
  155. label: '动火审批'
  156. },
  157. ],
  158. drill: false,
  159. fireService: false,
  160. special: false,
  161. hotApproval: false,
  162. fireInspection: true,
  163. clicKValue: 0, //点击的样式
  164. selectedTag: '',
  165. current:''
  166. };
  167. },
  168. watch: {
  169. loading: {
  170. handler(newLength, oldLength) {
  171. this.$modal.isLoadingModel(this.loading)
  172. },
  173. immediate: true
  174. }
  175. },
  176. // 在 vue页面,向起始页通过事件传递数据
  177. onLoad: function(option) {
  178. if (option.my) {
  179. this.my = option.my
  180. }
  181. },
  182. onShow() {
  183. this.tableData = []
  184. this.getData(1);
  185. this.selectedTag =''
  186. this.fireInspection =true
  187. this.current=0
  188. },
  189. methods: {
  190. // tab头部点击
  191. onClickItem(e) {
  192. if (this.current !== e.index) {
  193. this.current = e.index
  194. }
  195. this.fireInspection = false;
  196. switch (e.index) {
  197. case 0:
  198. this.fireInspection = true //消防检查结果
  199. this.selectedTag=''
  200. break;
  201. case 1:
  202. this.drill = true //培训与演练
  203. this.selectedTag='Drill'
  204. break;
  205. case 2:
  206. this.fireService = true //消防设施维护和检测
  207. this.selectedTag='FpdDetection'
  208. break;
  209. case 3:
  210. this.special = true //特种作业人员
  211. this.selectedTag='FireSpecial'
  212. break;
  213. case 4:
  214. this.hotApproval = true //动火审批
  215. this.selectedTag='FireWork'
  216. break;
  217. default:
  218. break;
  219. }
  220. console.log(this.current,'l');
  221. },
  222. setInverted(value, rotues) { //标签的点击事件
  223. this.fireInspection = false;
  224. // this.drill = false;
  225. // this.fireService = false;
  226. // this.special = false;
  227. // this.hotApproval = false;
  228. switch (value) {
  229. case 0:
  230. this.fireInspection = true //消防检查结果
  231. break;
  232. case 1:
  233. // this.drill = true //培训与演练
  234. // break;
  235. // case 2:
  236. // this.fireService = true //消防设施维护和检测
  237. // break;
  238. // case 3:
  239. // this.special = true //特种作业人员
  240. // break;
  241. // case 4:
  242. // this.hotApproval = true //动火审批
  243. // break;
  244. // default:
  245. // break;
  246. }
  247. this.clicKValue = value
  248. this.selectedTag = rotues;
  249. },
  250. changeLog(e) {
  251. this.title = ''
  252. this.isLoaded = false
  253. this.tableData = []
  254. if (this.kewords.length > 0 && this.kewords[0].indexOf(":") === -1) {
  255. this.kewords[0] = this.kewords[0] + ' 00:00:00'
  256. this.kewords[1] = this.kewords[1] + ' 23:59:59'
  257. }
  258. this.getData(1)
  259. console.log(this.kewords, 'ddddddddddd', e);
  260. },
  261. // =================数据转换==================
  262. statusListTran(val) {
  263. //status状态转换
  264. return this.statusList[val];
  265. },
  266. // ================================
  267. // 获取数据
  268. getData(pageNo, value = '') {
  269. this.loading = true;
  270. this.pageNo = pageNo;
  271. let formChuan = {
  272. pageNo: this.pageNo,
  273. pageSize: this.pageSize,
  274. userId: this.$store.state.user.id,
  275. inspectTime: this.kewords,
  276. taskName: this.taskname
  277. }
  278. if (this.my == 'onlymy') {
  279. getSelfInspecthisPage(formChuan).then(response => {
  280. console.log('response', response);
  281. // 为数据赋值:通过展开运算符的形式,进行新旧数据的拼接
  282. this.isLoaded = true
  283. this.tableData = [...this.tableData, ...response.data.records];
  284. this.tableData.map(i => {
  285. i.inspect_time = shijianc(i.inspect_time)
  286. })
  287. // this.tableData = response.data.list;
  288. this.total = response.data.total;
  289. this.loading = false;
  290. });
  291. } else {
  292. getInspecthisPage(formChuan).then(response => {
  293. console.log('1111', response);
  294. this.isLoaded = true
  295. // 为数据赋值:通过展开运算符的形式,进行新旧数据的拼接
  296. this.tableData = [...this.tableData, ...response.data.list];
  297. this.tableData.map(i => {
  298. i.inspect_time = shijianc(i.inspect_time)
  299. })
  300. // this.tableData = response.data.list;
  301. this.total = response.data.total;
  302. this.loading = false;
  303. });
  304. }
  305. },
  306. onClick(val) {
  307. console.log(val);
  308. this.isLoaded = false
  309. if (this.my == "myonly") {
  310. uni.navigateTo({
  311. url: `/pagesB/fire/check_record/picture/picture?items=${JSON.stringify(val)}`
  312. });
  313. } else {
  314. uni.navigateTo({
  315. url: `/pagesB/fire/check_record/picture/picture?id=${val.id}`
  316. });
  317. }
  318. },
  319. gotoDetails(val) {
  320. this.isLoaded = false
  321. console.log('val.status', val.status);
  322. var url = '';
  323. if (val.status == 1) {
  324. //主动检查详情
  325. url = '/pagesA/fire/check_active/check_details/check_details?id=' + val.id;
  326. } else if (val.status == 2) {
  327. //每日巡检详情
  328. url = '/pages/s9Unit/daily_inspection/inspection_details/inspection_details?id=' + val.id;
  329. } else if (val.status == 3) {
  330. url = '/pagesA/fire/hidden_trouble/trouble_details/trouble_details?id=' + val.id;
  331. } else if (val.status == 4) {
  332. url = '/pagesA/fire/check_tasks/tasks_details/tasks_details?id=' + val.id;
  333. } else {}
  334. uni.navigateTo({
  335. url: url
  336. });
  337. },
  338. gotoPersonnelDetails(val) {
  339. this.isLoaded = false
  340. uni.navigateTo({
  341. url: '/pagesB/fire/check_record/personnel_record/personnel_record?id=' + val.id
  342. });
  343. },
  344. // 触底的事件
  345. scrolltolower() {
  346. // 判断是否还有下一页数据
  347. if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
  348. title: `数据加载完毕`
  349. });
  350. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  351. if (this.loading) return;
  352. this.pageNo += 1;
  353. this.getData(this.pageNo);
  354. }
  355. // 触底的事件
  356. // onReachBottom() {
  357. // // 判断是否还有下一页数据
  358. // if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
  359. // title: `数据加载完毕`
  360. // })
  361. // // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  362. // if (this.loading) return
  363. // this.pageNo += 1
  364. // this.getData(this.pageNo)
  365. // }
  366. }
  367. };
  368. </script>
  369. <style scoped lang="scss">
  370. .uni-container {
  371. height: 100vh;
  372. }
  373. .top {
  374. display: flex;
  375. align-items: center;
  376. width: 90%;
  377. margin-left: 5%;
  378. justify-content: space-between;
  379. .search-time {
  380. display: flex;
  381. align-items: center;
  382. margin-top: 40rpx;
  383. margin-bottom: 20rpx;
  384. .time-item {
  385. margin-right: 20rpx;
  386. }
  387. }
  388. }
  389. ::v-deep .u-icon__icon {
  390. top: 2px !important;
  391. padding-left: 3px !important;
  392. }
  393. ::v-deep .uni-section-header {
  394. padding: 0 !important;
  395. }
  396. .bg {
  397. background-color: #bdbdbd;
  398. }
  399. </style>