Immediateinspection.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. <template>
  2. <view class="">
  3. <view class="" style="width: 750rpx;height: 50rpx;">
  4. </view>
  5. <view class="topname">
  6. <view class="topname1" @click="goback">
  7. <u-icon name="arrow-left" color="#000000" size="36"></u-icon>
  8. </view>
  9. <view class="topname2">
  10. 巡检打卡
  11. </view>
  12. </view>
  13. <view class="getuserInfo">
  14. <view class="getuserInfoimg">
  15. <u--image :src="src" width="120rpx" height="120rpx"></u--image>
  16. </view>
  17. <view class="getuserInfoname">
  18. <h3>{{getuserInfo.realName}}</h3>
  19. <view>安保组</view>
  20. </view>
  21. <view class="getuserInfophone">
  22. <view class="getuserInfophone1">
  23. <u-icon name="phone" color="#2979ff" size="36"></u-icon>
  24. </view>
  25. <view class="getuserInfophone2">{{getuserInfo.mobile}}</view>
  26. </view>
  27. </view>
  28. <!--打卡-->
  29. <view class="Punchin">
  30. <view class="dakaweizhi">
  31. <view class="dakaweizhi1">
  32. <u-icon name="map" color="#6DD400" size="36"></u-icon>
  33. </view>
  34. <view class="dakaweizhi2">当前打卡位置:{{Punchposition}}</view>
  35. </view>
  36. <view class="shexiangji" @click="Punchindata">
  37. <view class="shexiangji1">扫码打卡</view>
  38. <view class="shexiangji2">
  39. <u-icon name="camera" color="#ffffff" size="90"></u-icon>
  40. </view>
  41. </view>
  42. </view>
  43. <view class="dakajilv">今日打卡记录</view>
  44. <view class="u-listdata">
  45. <view style="padding:10rpx 0 0 30rpx">
  46. 共有 <span style="color: red">{{totalnumber}}</span>条记录
  47. </view>
  48. <u-list @scrolltolower="scrolltolower" :pagingEnabled='true'>
  49. <u-list-item v-for="(item, index) in indexList" :key="index">
  50. <view class="companylist">
  51. <h3>{{item.position}}</h3>
  52. <view class="Currentamount">
  53. 巡检时间:{{item.circuitTime}}
  54. </view>
  55. </view>
  56. </u-list-item>
  57. </u-list>
  58. </view>
  59. <u-notify ref="uNotify" message=""></u-notify>
  60. </view>
  61. </template>
  62. <script>
  63. import {
  64. getCurrentTime
  65. } from "@/utils/index";
  66. export default {
  67. data() {
  68. return {
  69. Punchposition: '',
  70. getuserInfo: {},
  71. pd: true,
  72. totalnumber: 0,
  73. indexList: [],
  74. src: 'https://cdn.uviewui.com/uview/album/1.jpg',
  75. dataForm: {
  76. page: 1,
  77. limit: 99999,
  78. circuitType: "",
  79. startDate: "",
  80. endDate: "",
  81. buildingId: "",
  82. storeyId: "",
  83. circuitPersonId: "",
  84. },
  85. }
  86. },
  87. //监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参
  88. onLoad() {
  89. this.getuserInfo = uni.getStorageSync('getuserInfo');
  90. //console.log('111111111111111111', this.getuserInfo)
  91. var date = new Date();
  92. var year = date.getFullYear();
  93. var month = date.getMonth() + 1;
  94. var day = date.getDate();
  95. // this.circuitPosition = this.$route.query.circuitPosition;
  96. this.dataForm.startDate = `${year}-${month}-${day}` + " 00:00:00";
  97. this.dataForm.endDate = `${year}-${month}-${day}` + " 23:59:59";
  98. this.dataForm.circuitPersonId = this.getuserInfo.id;
  99. // this.dataForm.circuitType = this.userInfo.circuitType;
  100. // console.log('111111111111111111',this.dataForm)
  101. this.getDataList();
  102. },
  103. //监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
  104. onReady() {},
  105. //监听页面隐藏
  106. onHide() {},
  107. //监听窗口尺寸变化
  108. onResize() {},
  109. //监听页面卸载
  110. onUnload() {},
  111. //监听用户下拉动作,一般用于下拉刷新
  112. onPullDownRefresh() {},
  113. methods: {
  114. goback() {
  115. uni.navigateTo({
  116. url: '/pages/index/index'
  117. })
  118. },
  119. Punchindata() {
  120. uni.scanCode({
  121. //是否只能从相机扫码,不能从相册扫码
  122. onlyFromCamera: false,
  123. //规定扫码类型 字节跳动小程序不支持此参数
  124. // barcode就是一维码(条形码) qrcode就是(er)维码
  125. // datamatrix就是Data Matrix码 pdf417就是PDF417条码
  126. scanType: ['barCode', 'qrCode', ],
  127. // 是否启动自动识别字符编码功能
  128. autoDecodeCharset: false,
  129. // 是否开启自动放大功能 仅 App-Android (3.5.4+) 支持
  130. autoZoom: false,
  131. // 是否支持手动输入条形码 仅飞书小程序(V3.14.0)支持
  132. barCodeInput: false,
  133. success: (res) => {
  134. //console.log('111111111111111111', JSON.parse(res.result))
  135. let lsdata = JSON.parse(res.result)
  136. this.Punchposition = lsdata.position;
  137. let postdata = {
  138. "buildingId": lsdata.buildingId, //楼宇id
  139. "storeyId": lsdata.storeyId, //楼层id
  140. //"houseId": lsdata.buildingId, //房间id
  141. "position": lsdata.position, //位置信息
  142. "circuitPersonId": this.getuserInfo.id, //巡检人员id
  143. "circuitTime": getCurrentTime(), //巡检时间
  144. // "circuitType": this.getuserInfo.circuitType,//巡检类型
  145. "circuitType": '', //巡检类型
  146. "remark": lsdata.remark, //备注
  147. }
  148. this.$api.post('/circuitrecord', postdata)
  149. .then(res => {
  150. console.log('99999', res)
  151. if (res.data.code == 0) {
  152. this.$refs.uNotify.success('打卡成功')
  153. this.getDataListtwo();
  154. } else {
  155. this.$refs.uNotify.error('打卡失败')
  156. }
  157. })
  158. },
  159. fail: (error) => {
  160. this.$refs.uNotify.error(error)
  161. }
  162. })
  163. },
  164. getDataListtwo() {
  165. this.dataForm.page = 1;
  166. this.$api.get('/circuitrecord/page', this.dataForm)
  167. .then(res => {
  168. //console.log('111111111111111111',res.data.data)
  169. this.totalnumber = res.data.data.total;
  170. this.indexList = res.data.data.list;
  171. })
  172. },
  173. scrolltolower() {
  174. if (this.pd) {
  175. this.getalldata();
  176. } else {
  177. return
  178. }
  179. },
  180. getDataList() {
  181. this.$api.get('/circuitrecord/page', this.dataForm)
  182. .then(res => {
  183. //console.log('111111111111111111',res.data.data)
  184. this.totalnumber = res.data.data.total;
  185. if (res.data.data.list.length != 0) {
  186. this.indexList.push(...res.data.data.list);
  187. this.dataForm.page = this.dataForm.page + 1;
  188. this.pd = true;
  189. } else {
  190. uni.showToast({
  191. title: '暂无更多数据了',
  192. icon: 'none',
  193. duration: 1500
  194. })
  195. this.pd = false;
  196. }
  197. })
  198. },
  199. }
  200. }
  201. </script>
  202. <style lang="scss">
  203. .dakajilv {
  204. color: #666;
  205. font-size: 32rpx;
  206. padding-left: 30rpx;
  207. }
  208. .Currentamount {
  209. padding-left: 30rpx;
  210. height: 50rpx;
  211. line-height: 50rpx;
  212. color: #BCB3A7;
  213. span {
  214. color: #FA5555;
  215. padding-left: 9rpx;
  216. }
  217. }
  218. .topname {
  219. height: 44px;
  220. width: 750rpx;
  221. display: flex;
  222. align-items: center;
  223. }
  224. .topname1 {
  225. width: 50rpx;
  226. padding-left: 10rpx;
  227. }
  228. .topname2 {
  229. width: 700rpx;
  230. text-align: center;
  231. font-weight: bold;
  232. }
  233. .Callfee {
  234. width: 100rpx;
  235. height: 45rpx;
  236. text-align: center;
  237. line-height: 45rpx;
  238. color: #5C8FFF;
  239. border: 1px solid #5C8FFF;
  240. font-size: 22rpx;
  241. position: absolute;
  242. bottom: 10rpx;
  243. right: 10px;
  244. font-weight: bold;
  245. }
  246. .companylist {
  247. margin: 20rpx 30rpx;
  248. background: #fff;
  249. height: 140rpx;
  250. border-radius: 10px;
  251. position: relative;
  252. h3 {
  253. height: 70rpx;
  254. line-height: 70rpx;
  255. padding-left: 30rpx;
  256. }
  257. }
  258. .settled {
  259. background-color: #09C700;
  260. width: 100rpx;
  261. height: 40rpx;
  262. text-align: center;
  263. line-height: 40rpx;
  264. color: #fff;
  265. font-size: 14rpx;
  266. position: absolute;
  267. top: 0px;
  268. right: 0px;
  269. border-top-right-radius: 10rpx;
  270. border-bottom-left-radius: 10rpx;
  271. }
  272. .outstanding {
  273. background-color: #30D3A2;
  274. width: 100rpx;
  275. height: 40rpx;
  276. text-align: center;
  277. line-height: 40rpx;
  278. color: #fff;
  279. font-size: 14rpx;
  280. position: absolute;
  281. top: 0px;
  282. right: 0px;
  283. border-top-right-radius: 10rpx;
  284. border-bottom-left-radius: 10rpx;
  285. }
  286. .billall {}
  287. .topbill {
  288. display: flex;
  289. justify-content: center;
  290. align-items: center;
  291. height: 100rpx;
  292. background-color: #e6e6e6;
  293. }
  294. .topbilledit {
  295. display: flex;
  296. justify-content: space-around;
  297. align-items: center;
  298. }
  299. .changetime1 {
  300. padding-right: 10rpx;
  301. }
  302. .shexiangji1 {
  303. color: #fff;
  304. font-size: 36rpx;
  305. font-weight: bold;
  306. }
  307. .shexiangji {
  308. width: 300rpx;
  309. height: 300rpx;
  310. border-radius: 50%;
  311. background: #5C8FFF;
  312. margin: 0 auto;
  313. display: flex;
  314. justify-content: center;
  315. flex-direction: column;
  316. align-items: center;
  317. }
  318. .dakaweizhi2 {
  319. color: #999;
  320. font-size: 26rpx;
  321. }
  322. .dakaweizhi {
  323. display: flex;
  324. align-items: center;
  325. justify-content: center;
  326. width: 690rpx;
  327. height: 300rpx;
  328. }
  329. .Punchin {
  330. width: 690rpx;
  331. margin: 30rpx auto;
  332. background: #fff;
  333. height: 690rpx;
  334. }
  335. .getuserInfo {
  336. display: flex;
  337. align-items: center;
  338. width: 690rpx;
  339. margin: 0 auto;
  340. background: #fff;
  341. height: 160rpx;
  342. border-radius: 10rpx;
  343. }
  344. .getuserInfoimg {
  345. margin-left: 20rpx;
  346. margin-right: 30rpx;
  347. }
  348. .getuserInfoname {
  349. height: 120rpx;
  350. display: flex;
  351. flex-direction: column;
  352. justify-content: space-between;
  353. margin-right: 20rpx;
  354. h3 {
  355. color: #333;
  356. font-size: 32rpx;
  357. }
  358. view {
  359. color: #999;
  360. font-size: 24rpx;
  361. }
  362. }
  363. .getuserInfophone {
  364. height: 120rpx;
  365. display: flex;
  366. align-items: flex-start;
  367. }
  368. .getuserInfophone2 {
  369. color: #666;
  370. font-size: 28rpx;
  371. }
  372. </style>