index4.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. <template>
  2. <view class="uni-container uni-container-bg">
  3. <!-- 卡片栏 -->
  4. <view v-if="tableData.length>0 && isLoaded">
  5. <view v-for="(item, index) in tableData" :key="index">
  6. <uni-card>
  7. <!-- 标题 -->
  8. <view class="titles">{{ item.dd }}</view>
  9. <!-- 简要内容 -->
  10. <view class="duanluo">
  11. <text class="name-align-drill">财产损失金额 :</text>
  12. <text class="conts">{{ item.ccssje }}</text>
  13. </view>
  14. <view class="duanluo">
  15. <text class="name-align-drill">事故原因:</text>
  16. <text class="conts">{{ item.sgyy }}</text>
  17. </view>
  18. <view class="duanluo">
  19. <text class="name-align-drill">起火时间 :</text>
  20. <text class="conts">{{ item.qhsj }}</text>
  21. </view>
  22. <view style="margin-top: 60rpx;">
  23. <!-- 删除按钮 -->
  24. <view class="an-niu" @click.native="showModal(item)">
  25. <view class="detailDel">删除</view>
  26. </view>
  27. <view class="an-niu" @click.native="onClick(item)" link><text class="detail">查看详情</text></view>
  28. </view>
  29. </uni-card>
  30. </view>
  31. </view>
  32. <!-- tableData为空时显示 -->
  33. <view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
  34. <view class="text-gray" style="padding-top: 20px;" v-if="tableData == 0">
  35. <img :src="tan90" alt="暂无数据" />
  36. </view>
  37. </view>
  38. <view>
  39. <image :src="Group" @click="addClick" class="tiantupian"></image>
  40. </view>
  41. <u-modal :show="show" @confirm="confirm" @cancel="cancel" @close="close" asyncClose closeOnClickOverlay
  42. showCancelButton confirmColor="red" :title="title" :content="content" ref="uModal"></u-modal>
  43. <!-- 加载中 -->
  44. <isLodingModel></isLodingModel>
  45. </view>
  46. </template>
  47. <script>
  48. var that = '';
  49. import {
  50. getArchive, //获取培训演练信息列表
  51. delArchive //删除培训演练信息
  52. } from '@/api/archive/index4.js';
  53. import config from '@/config'
  54. const baseUrlImg = config.baseUrlImg
  55. export default {
  56. data() {
  57. return {
  58. isLoaded: false,
  59. Group: `${baseUrlImg}/checkActive/Group.png`,
  60. showOrg: false,
  61. actions: [],
  62. // 数据
  63. tableData: {},
  64. title: '是否删除该数据项?',
  65. content: '确认删除?',
  66. id: '',
  67. tan90: `${baseUrlImg}/tan90.png`,
  68. // 每页数据量
  69. pageSize: 5,
  70. // 当前页
  71. pageNo: 1,
  72. // 数据总量
  73. total: 0,
  74. // tableData数据加载中
  75. loading: false,
  76. // 初始化时搜索框的值
  77. keyword: '',
  78. // 存放orgid,orgname
  79. formData: {
  80. orgName: ''
  81. },
  82. show: false,
  83. showtimeStart: false,
  84. showtimeEnd: false
  85. };
  86. },
  87. // 在 vue页面,向起始页通过事件传递数据
  88. onLoad: function(option) {},
  89. onShow() {
  90. this.tableData = []
  91. this.getData();
  92. },
  93. onReady() {},
  94. // 在 vue页面,向起始页通过事件传递数据
  95. watch: {
  96. loading: {
  97. handler(newLength, oldLength) {
  98. this.$modal.isLoadingModel(this.loading)
  99. },
  100. immediate: true
  101. }
  102. },
  103. mixins: [uni.$u.mixin],
  104. methods: {
  105. // 模态框内容
  106. showModal(val) {
  107. this.show = true;
  108. this.id = val.id;
  109. },
  110. confirm() {
  111. this.show = false;
  112. delArchive({
  113. id: this.id
  114. }).then(response => {
  115. this.loading = true;
  116. this.isLoaded = false
  117. this.tableData = []
  118. this.getData();
  119. console.log(this.tableData, '获培训演练信息详细信息获取培训演练信息详细信息');
  120. });
  121. },
  122. close() {
  123. this.show = false;
  124. console.log('close');
  125. },
  126. cancel() {
  127. this.show = false;
  128. console.log('cancel');
  129. },
  130. // 获取数据
  131. getData() {
  132. this.loading = true;
  133. const value = uni.getStorageSync('getUserInfo_key');
  134. // 获取培训演练信息详细信息
  135. getArchive({
  136. pageNo: this.pageNo,
  137. pageSize: this.pageSize,
  138. streetId: value.streetInfo ? value.streetInfo.id : ''
  139. }).then(response => {
  140. this.isLoaded = true
  141. this.tableData = [...this.tableData, ...response.data.list]
  142. this.loading = false
  143. // this.tableData = response.data.list;
  144. console.log(response, '获取培训演练');
  145. });
  146. },
  147. // 传递数据
  148. onClick(val) {
  149. console.log(val, 'val');
  150. this.isLoaded = false
  151. uni.navigateTo({
  152. url: '/pagesA/fire/archive/archive_details/archive_details4?id=' + val.id,
  153. events: {
  154. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  155. acceptDataFromOpenedPage: function(val) {
  156. console.log(val, '打开页面传送到当前页面的数据');
  157. }
  158. },
  159. success: function(res) {
  160. // 通过eventChannel向被打开页面传送数据
  161. res.eventChannel.emit('acceptDataFromOpenerPage', val);
  162. }
  163. });
  164. },
  165. addClick() {
  166. this.isLoaded = false
  167. uni.navigateTo({
  168. url: '/pagesA/fire/archive/add_archive/add_archive4'
  169. });
  170. },
  171. // 触底的事件
  172. onReachBottom() {
  173. // 判断是否还有下一页数据
  174. if (this.pageNo * this.pageSize >= this.total)
  175. return uni.showToast({
  176. title: `数据加载完毕`
  177. });
  178. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  179. if (this.loading) return;
  180. this.pageNo += 1;
  181. this.getData(this.pageNo);
  182. }
  183. }
  184. };
  185. </script>
  186. <style lang="scss" scoped>
  187. body {
  188. background-color: #f5f7f9;
  189. }
  190. page {
  191. background-color: #f5f7f9;
  192. }
  193. /deep/ .u-tabs__wrapper[data-v-0de61367],
  194. /deep/.u-tabs__wrapper.data-v-0de61367,
  195. /deep/ .u-tabs__wrapper {
  196. width: 99%;
  197. }
  198. /deep/.u-tabs__wrapper__nav__item[data-v-0de61367],
  199. /deep/.u-tabs__wrapper__nav__item.data-v-0de61367,
  200. /deep/.u-tabs__wrapper__nav__item {
  201. padding: 0 60rpx;
  202. }
  203. .uni-container {
  204. height: 100vh;
  205. padding-right: 20upx;
  206. }
  207. .addInsp {
  208. width: 40px;
  209. position: fixed;
  210. right: 4px;
  211. z-index: 99999;
  212. }
  213. ::v-deep .u-icon__icon {
  214. margin-right: 0px !important;
  215. }
  216. .an-niu {
  217. float: right;
  218. font-size: 10px;
  219. text-align: center;
  220. display: flex;
  221. margin-top: -64upx;
  222. padding-bottom: 30rpx;
  223. // margin-top: 50rpx;
  224. color: #fff;
  225. .detail {
  226. width: 60px;
  227. height: 60rpx;
  228. padding: 0 20rpx;
  229. border-radius: 30px;
  230. background-color: #f7c41e;
  231. margin-right: 20rpx;
  232. text-align: center;
  233. line-height: 60rpx;
  234. font-size: 27upx;
  235. }
  236. .detailDel {
  237. width: 60px;
  238. height: 60rpx;
  239. padding: 0 20rpx;
  240. border-radius: 30px;
  241. background-color: #ff2e31;
  242. color: white;
  243. margin-right: 20rpx;
  244. text-align: center;
  245. line-height: 60rpx;
  246. font-size: 30upx;
  247. }
  248. .solve {
  249. width: 62px;
  250. height: 60rpx;
  251. margin-right: 20rpx;
  252. border-radius: 30px;
  253. background-color: #4cb2b6;
  254. line-height: 60rpx;
  255. }
  256. /deep/ .padding-tb-sm {
  257. padding-top: 0px;
  258. padding-bottom: 10px;
  259. }
  260. .deletes {
  261. width: 62px;
  262. height: 60rpx;
  263. border-radius: 60rpx;
  264. background-color: red;
  265. color: #fff;
  266. line-height: 60rpx;
  267. }
  268. }
  269. /deep/.segmented-control__item--button {
  270. background-color: rgb(76, 178, 182) !important;
  271. }
  272. /deep/.segmented-control__item--button--active {
  273. background-color: #ffffff !important;
  274. }
  275. /deep/.uni-card {
  276. box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
  277. border-radius: 30rpx;
  278. }
  279. .tiantupian {
  280. width: 110rpx;
  281. height: 110rpx;
  282. position: fixed;
  283. right: 15px;
  284. bottom: 80rpx;
  285. }
  286. //列表样式
  287. .titles {
  288. font-weight: 600;
  289. margin-bottom: 10rpx;
  290. color: #1E293B;
  291. font-size: 30rpx;
  292. }
  293. .conts {
  294. max-width: 470rpx;
  295. display: -webkit-box;
  296. /*弹性伸缩盒子模型显示*/
  297. -webkit-box-orient: vertical;
  298. /*排列方式*/
  299. -webkit-line-clamp: 1;
  300. /*显示文本行数*/
  301. overflow: hidden;
  302. /*溢出隐藏*/
  303. color: #274647;
  304. text-overflow: ellipsis;
  305. /*不知道干嘛的*/
  306. .conts-title {
  307. margin-right: 10rpx;
  308. color: #728f90;
  309. }
  310. }
  311. .max-width {
  312. max-width: 180upx;
  313. }
  314. .duanluo {
  315. display: flex;
  316. margin-bottom: 15rpx;
  317. color: #728f90;
  318. }
  319. </style>