fireRun.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <template>
  2. <view class="uni-container uni-container-bg">
  3. <view class="top">
  4. <view>
  5. <view class="search-time">
  6. <text class="time-item">事件时间:</text>
  7. <uni-datetime-picker class="time-item-check" type="date" v-model="startSingle"
  8. @maskClick="startMaskClick" />
  9. </view>
  10. <view class="search-time">
  11. <text class="time-item">结束时间:</text>
  12. <uni-datetime-picker class="time-item-check" type="date" v-model="endSingle"
  13. @maskClick="endMaskClick" />
  14. </view>
  15. </view>
  16. <view class="search-icon">
  17. <u-icon name="search" color="#4CB2B6" size="40" @click="handleQuery"></u-icon>
  18. </view>
  19. </view>
  20. <view class="main">
  21. <view v-for="(item, index) in list" :key="index">
  22. <uni-card v-if="list.length>0">
  23. <view class="main-item">
  24. <rich-text :nodes="`事件内容: ${item.eventContent}`" class="font-16"></rich-text>
  25. </view>
  26. <view class="main-item">
  27. <text style="width: 140rpx;">事件日期:</text>
  28. <text class="conts">{{ item.eventTime}}</text>
  29. </view>
  30. <view class="">
  31. <view class="an-niu" @click.native="delClick(item.id)" link style="margin-left:3px">
  32. <text class="deletes">删除事件</text>
  33. </view>
  34. <view class="an-niu" @click.native="editClick(item.id)" link style="margin-left:3px;">
  35. <text class="bianji">编辑事件</text>
  36. </view>
  37. </view>
  38. </uni-card>
  39. <view v-else style="text-align:center">
  40. 暂无数据
  41. </view>
  42. </view>
  43. </view>
  44. <view>
  45. <image :src="Group" @click="addClick" class="tiantupian"></image>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. import config from '@/config'
  51. import {
  52. getStationEvent,
  53. delMicrostation
  54. } from '@/api/fire_station/index';
  55. const baseUrlImg = config.baseUrlImg
  56. export default {
  57. data() {
  58. return {
  59. Group: `${baseUrlImg}/checkActive/Group.png`,
  60. endSingle: '', //结束时间
  61. startSingle: '', //开始时间
  62. list: [],
  63. queryParams: {
  64. pageNo: 1,
  65. pageSize: 5,
  66. eventTime: [],
  67. eventContent: null,
  68. },
  69. eventTimeString: '',
  70. // 总条数
  71. total: 0,
  72. }
  73. },
  74. onShow() {
  75. this.list = []
  76. this.getData()
  77. },
  78. methods: {
  79. getData() {
  80. if (this.queryParams.pageNo != 1) {
  81. this.queryParams.eventTime.push(this.startSingle, this.endSingle)
  82. }
  83. getStationEvent(this.queryParams).then(response => {
  84. console.log(response, 'responseresponse');
  85. this.list = [...this.list, ...response.data.list]
  86. this.total = response.data.total;
  87. this.queryParams.eventTime = []
  88. })
  89. },
  90. delClick(val) {
  91. let that = this
  92. uni.showModal({
  93. title: '确认删除',
  94. content: `是否确认删除?`,
  95. success: function(res) {
  96. console.log(res, 'res');
  97. if (res.confirm) {
  98. delMicrostation({
  99. id: val
  100. }).then(delres => {
  101. that.$modal.msg('删除成功')
  102. that.queryParams.pageNo = 1;
  103. that.list=[]
  104. that.getData()
  105. that.$forceUpdate()
  106. })
  107. // delRole(ids);
  108. } else if (res.cancel) {
  109. console.log('用户点击取消');
  110. }
  111. }
  112. });
  113. },
  114. /** 搜索按钮操作 */
  115. handleQuery() {
  116. const end = new Date(this.endSingle).getTime()
  117. const start = new Date(this.startSingle).getTime()
  118. if (!this.endSingle && !this.startSingle) {
  119. this.queryParams.pageNo = 1;
  120. this.list = []
  121. this.getData();
  122. } else if (this.endSingle && this.startSingle && start <= end) {
  123. // } else{
  124. this.queryParams.pageNo = 1;
  125. this.queryParams.eventTime.push(this.startSingle, this.endSingle)
  126. this.list = []
  127. this.getData();
  128. } else if (start > end) {
  129. this.$modal.msgError('结束时间不能小于事件时间')
  130. } else {
  131. this.$modal.msgError('请选择事件时间和结束时间')
  132. }
  133. },
  134. startMaskClick(e) {
  135. console.log('maskClick事件:', e);
  136. },
  137. endMaskClick(e) {
  138. console.log('maskClick事件:', e);
  139. },
  140. addClick() {
  141. uni.navigateTo({
  142. url: '/pagesA/fire/add_fireRun/add_fireEvent/add_fireEvent'
  143. });
  144. },
  145. editClick(val) {
  146. uni.navigateTo({
  147. url: `/pagesA/fire/add_fireRun/add_fireEvent/add_fireEvent?id=${val}`
  148. });
  149. }
  150. },
  151. // 触底的事件
  152. onReachBottom() {
  153. // 判断是否还有下一页数据
  154. if (this.queryParams.pageNo * this.queryParams.pageSize >= this.total)
  155. return uni.showToast({
  156. title: `数据加载完毕`
  157. });
  158. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  159. if (this.loading) return;
  160. this.queryParams.pageNo += 1;
  161. this.getData();
  162. },
  163. }
  164. </script>
  165. <style lang="scss" scoped>
  166. body {
  167. background-color: #f5f7f9;
  168. }
  169. page {
  170. background-color: #f5f7f9 !important;
  171. }
  172. .uni-container {
  173. height: 100vh;
  174. }
  175. .top {
  176. display: flex;
  177. align-items: center;
  178. width: 90%;
  179. margin-left: 5%;
  180. justify-content: space-between;
  181. .search-time {
  182. display: flex;
  183. align-items: center;
  184. margin-top: 40rpx;
  185. margin-bottom: 20rpx;
  186. .time-item {
  187. margin-right: 20rpx;
  188. }
  189. .time-item-check {}
  190. }
  191. .search-icon {}
  192. }
  193. .tiantupian {
  194. width: 110rpx;
  195. height: 110rpx;
  196. position: fixed;
  197. right: 15px;
  198. bottom: 40rpx;
  199. }
  200. /deep/.uni-card {
  201. box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
  202. border-radius: 30rpx;
  203. }
  204. .main {
  205. margin-left: 5%;
  206. margin-top: 30rpx;
  207. width: 90%;
  208. .main-item {
  209. display: flex;
  210. // justify-content: start;
  211. // justify-content: space-between;
  212. margin-bottom: 15rpx;
  213. color: #728f90;
  214. }
  215. }
  216. .an-niu {
  217. float: right;
  218. font-size: 10px;
  219. text-align: center;
  220. display: flex;
  221. color: #fff;
  222. .deletes,
  223. .bianji {
  224. width: 72px;
  225. height: 60rpx;
  226. border-radius: 30px;
  227. background-color: red;
  228. margin-right: 20rpx;
  229. margin-bottom: 20rpx;
  230. text-align: center;
  231. line-height: 60rpx;
  232. }
  233. .bianji {
  234. background-color: #4CB2B6
  235. }
  236. }
  237. /deep/.u-button--primary {
  238. border: 1px solid #fff;
  239. background-color: #fff !important;
  240. }
  241. </style>