index.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. <template>
  2. <view class="pageContainer">
  3. <view class="search">
  4. <u-cell title="报警时间" :value="calendarStart + ' 至 ' + calendarEnd" style="height: 86rpx"
  5. @click="$refs.calendarRef.show()">
  6. </u-cell>
  7. <tq-calendar ref="calendarRef" type="daterange" @confirm="(e) => {
  8. calendarStart = e[0]
  9. calendarEnd = e[1]
  10. page = 1;
  11. tableList = [];
  12. handleTableList()
  13. }">
  14. </tq-calendar>
  15. <u-cell title="车辆" :border="true" :isLink="true" @click="$refs.carChooseRef.show()">
  16. <view slot="value">
  17. <!-- <u-form-item label="" prop="vehicleId"> -->
  18. {{ plate }}
  19. <!-- </u-form-item> -->
  20. </view>
  21. <u-icon v-if="plate == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
  22. <view v-else slot="right-icon" @click.stop="resetData" style="margin-left: 20rpx;">
  23. <u-icon size="16" name="close-circle"></u-icon>
  24. </view>
  25. </u-cell>
  26. <tq-car-user ref="carChooseRef" :isGetIcon="true" @confirm="(data) => {
  27. vehicleId = data.id
  28. plate = data.label
  29. page = 1;
  30. tableList = [];
  31. handleTableList()
  32. }">
  33. </tq-car-user>
  34. </view>
  35. <view class="body">
  36. <view class="list" v-for="item in tableList" :key="item.id">
  37. <view style="
  38. display: flex;
  39. margin-bottom: 20rpx;
  40. margin-top: 20rpx;">
  41. <view class="head" style="font-size: 26rpx">
  42. <text style="font-weight: bold;">车辆:{{ item.plate }}</text>
  43. </view>
  44. <view class="head" style="margin-left: 73rpx">
  45. <text style="font-weight: bold;">
  46. <text>{{ item.deptName }}</text>
  47. </text>
  48. </view>
  49. </view>
  50. <view style="
  51. margin-bottom: 20rpx;
  52. display: flex;
  53. ">
  54. <view class="head" style="font-size: 26rpx">
  55. <text>司机:
  56. <text>
  57. {{ item.driverName }}
  58. </text>
  59. </text>
  60. </view>
  61. <view class="head" style="margin-left: 26rpx">
  62. <text>{{ item.driverPhone }}</text>
  63. </view>
  64. </view>
  65. <view>
  66. <view class="head" style="font-size: 26rpx;margin-bottom: 20rpx;">
  67. <text style="font-size: 30rpx; ">报警开始时间:{{ item.startTime }}</text>
  68. </view>
  69. <view class="head" style="font-size: 26rpx;margin-bottom: 20rpx;">
  70. <text style="font-size: 30rpx;">报警结束时间:{{ item.startTime }}</text>
  71. </view>
  72. </view>
  73. <view style="margin-bottom: 20rpx;">
  74. <view class="head" style="font-size: 26rpx">
  75. <view style="width: 20%;align-items: flex-start;">
  76. 报警位置:
  77. </view>
  78. <text style="font-size: 30rpx;flex: 1;">{{ item.location }}</text>
  79. </view>
  80. </view>
  81. <view style="height: 90rpx;">
  82. <u-button type="primary" @click="seeAlarmDetails(item)">查看详情</u-button>
  83. </view>
  84. </view>
  85. <view class="nodata-warp" v-if="!tableList.length">
  86. <image :src="$getImages('/assetsMobile/images/no-data.png')" class="nodata-image"></image>
  87. </view>
  88. <u-loadmore :status="loadStatus" height="30"/>
  89. </view>
  90. <u-calendar :show="calendarShow" mode="range" :defaultDate="defaultDate" :maxDate="maxDate" minDate="2023-10-01"
  91. monthNum="24" @confirm="calendarChange" @close="onClose"></u-calendar>
  92. </view>
  93. </template>
  94. <script>
  95. import { getAlarmDriverList } from "@/api/alarm/driverBehavior.js"
  96. export default {
  97. components: {
  98. },
  99. props: {},
  100. data() {
  101. return {
  102. vehicleId: '',
  103. plate: '',
  104. tableList: [],
  105. calendarShow: false, // 日历
  106. calendarStart: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),// 开始时间
  107. calendarEnd: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'), // 结束时间
  108. defaultDate: [this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'), this.dayjs().subtract(0, 'day').format('YYYY-MM-DD')],
  109. page: 1,
  110. size: 10,
  111. total: 0,
  112. maxDate: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'),
  113. loadStatus: 'nomore', //loading nomore loadmore
  114. };
  115. },
  116. mounted() {
  117. this.handleTableList();
  118. },
  119. onReachBottom() {
  120. // 滚动到底部
  121. if (this.page * this.size < this.total) {
  122. this.page += 1;
  123. this.handleTableList();
  124. }
  125. },
  126. methods: {
  127. checkTime() {
  128. this.calendarShow = true
  129. },
  130. resetData() {
  131. this.vehicleId = ''
  132. this.plate = ''
  133. this.page = 1;
  134. this.tableList = [];
  135. this.handleTableList();
  136. },
  137. handleDataDetection(data) {
  138. // 数据检测
  139. return data == null || data == undefined ? "" : data;
  140. },
  141. async handleTableList() {
  142. this.loadStatus = 'loading'
  143. // 获取列表
  144. // this.tableList = [];
  145. let obj = {
  146. startTime: this.calendarStart == "" || this.calendarStart == null ?
  147. undefined : this.calendarStart + ' 00:00:00',
  148. endTime: this.calendarEnd == "" || this.calendarEnd == null ?
  149. undefined : this.calendarEnd + ' 23:59:59',
  150. plate: this.plate ? this.plate : undefined,
  151. vehicleId: this.vehicleId ? this.vehicleId : undefined,
  152. driverAdvanceType: 'DSM',
  153. page: this.page,
  154. size: 10
  155. };
  156. let res = await getAlarmDriverList(obj);
  157. if (res.code == "0" && res.data.list) {
  158. res.data.list.map((e) => {
  159. this.tableList.push({
  160. ...e,
  161. });
  162. })
  163. // this.tableList = res.data.list
  164. this.total = res.data.total;
  165. if (this.page * 10 >= this.total) {
  166. this.loadStatus = 'nomore'
  167. }
  168. } else {
  169. this.loadStatus = 'nomore'
  170. }
  171. },
  172. calendarChange(e) {
  173. this.page = 1;
  174. this.tableList = [];
  175. // 修改日期
  176. this.calendarStart = e[0]; // 开始时间
  177. this.calendarEnd = e[1]; // 结束时间
  178. this.calendarShow = false;
  179. this.handleTableList();
  180. },
  181. onClose() {
  182. this.calendarShow = false;
  183. this.handleTableList();
  184. },
  185. seeAlarmDetails(item) {
  186. // 报警详情
  187. uni.navigateTo({
  188. url: `/alarm/driverBehavior/detail?fid=${item.fileuuid}`
  189. })
  190. },
  191. },
  192. };
  193. </script>
  194. <style lang="scss" scoped>
  195. .pageContainer {
  196. overflow: unset;
  197. // background-color: #fff;
  198. }
  199. .search {
  200. position: relative;
  201. padding: 0 0rpx;
  202. width: 100%;
  203. height: 166rpx;
  204. // display: flex;
  205. // align-items: center;
  206. background-color: #fff;
  207. }
  208. .head {
  209. height: 100%;
  210. font-size: 28rpx;
  211. display: flex;
  212. align-items: center;
  213. justify-content: flex-start;
  214. color: #333333;
  215. }
  216. .content {
  217. height: 100%;
  218. font-size: 28rpx;
  219. display: flex;
  220. align-items: center;
  221. justify-content: flex-start;
  222. color: #333333;
  223. }
  224. .body {
  225. margin-top: 20rpx;
  226. position: relative;
  227. padding: 10rpx;
  228. width: 100%;
  229. height: calc(100% - 172rpx);
  230. }
  231. .body .total {
  232. width: 100%;
  233. height: 65rpx;
  234. line-height: 65rpx;
  235. font-size: 26rpx;
  236. color: #999999;
  237. }
  238. .list {
  239. background-color: #fff;
  240. width: calc(100% - 90rpx);
  241. position: relative;
  242. display: flex;
  243. flex-direction: column;
  244. padding: 32rpx;
  245. background-color: white;
  246. border-radius: 20rpx;
  247. margin-bottom: 30rpx;
  248. }
  249. .nodata-warp{
  250. display: flex;
  251. justify-content: center;
  252. align-items: center;
  253. padding: 100rpx 0;
  254. .nodata-image{
  255. width: 218rpx;
  256. height: 150rpx;
  257. }
  258. }
  259. </style>