UpdateRecord.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <template>
  2. <div class='update-record'>
  3. <van-nav-bar title='说明书更新记录' left-arrow @click-left='backPage' />
  4. <van-dropdown-menu active-color='#1989fa'>
  5. <van-dropdown-item v-model='objtype' :options='option' @change='handleObjTypeChange' />
  6. </van-dropdown-menu>
  7. <div class='record'>
  8. <!-- 引入list,触底更新 -->
  9. <van-list class='record-list' v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load='onLoad'>
  10. <div class='info' v-for='(item,index) in list' :key='index'>
  11. <div class='left'>
  12. <div class='dot'></div>
  13. <div class='line'></div>
  14. </div>
  15. <div class='right'>
  16. <div class='title'>
  17. <span class='date'>{{item[0].date}}</span>
  18. </div>
  19. <div class='content' v-for='(detail,dIndex) in item' :key='dIndex' @click='goToDetailInfo(detail)'>
  20. <p class='type'>{{objtypeDict[detail.objtype]}}</p>
  21. <p>{{detail.content}}</p>
  22. </div>
  23. <!-- <div class='content'>
  24. <p class='type'>重要维修</p>
  25. <p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
  26. </div>-->
  27. </div>
  28. </div>
  29. <!-- <div class='m-load-more' v-show='!finished && list.length && list.length<=5 && page === 1' @click='onLoad'>加载更多</div> -->
  30. </van-list>
  31. </div>
  32. </div>
  33. </template>
  34. <script>
  35. /**
  36. * 说明书更新记录
  37. */
  38. import Vue from 'vue'
  39. import { NavBar, DropdownMenu, DropdownItem, List } from 'vant'
  40. Vue.use(NavBar)
  41. Vue.use(DropdownMenu).use(DropdownItem)
  42. Vue.use(List)
  43. import { mapGetters } from 'vuex'
  44. import { queryEventypes, getChangeList } from '@/api/overview'
  45. import { querySelect } from '@/api/public'
  46. import moment from 'moment'
  47. import { flattenDeep } from 'lodash'
  48. export default {
  49. name: 'UpdateRecord',
  50. props: {},
  51. components: {},
  52. data() {
  53. return {
  54. objtype: 0,
  55. option: [
  56. // { text: '全部', value: 0 },
  57. // { text: '重要维保', value: 1 },
  58. // { text: '重要维修', value: 4 },
  59. // { text: '其他事项', value: 5 },
  60. // { text: '综合事项', value: 3 },
  61. ],
  62. list: [],
  63. loading: false,
  64. finished: false,
  65. page: 1,
  66. size: 6,
  67. count: 0,
  68. }
  69. },
  70. computed: {
  71. ...mapGetters(['plazaId', 'objtypeDict']),
  72. },
  73. created() {
  74. // 查询更新记录列表
  75. this.getList()
  76. // 查询下拉菜单
  77. this.querySelect()
  78. },
  79. beforeMount() {},
  80. mounted() {},
  81. methods: {
  82. /**
  83. * 查询事件类型 下拉菜单
  84. */
  85. async querySelect() {
  86. let data = {
  87. plazaId: this.plazaId,
  88. },
  89. postParams = [
  90. {
  91. tableName: 'rpt_change_record',
  92. columnName: {
  93. objtype: 'objtype',
  94. },
  95. },
  96. ]
  97. let resData = await queryEventypes({ data, postParams })
  98. let objtype = resData?.data?.data?.rpt_change_record?.objtype
  99. console.log('%c======', 'color:blue')
  100. console.log(objtype)
  101. objtype.map((item) => (item.text = this.objtypeDict[item.value]))
  102. let option = [{ text: '全部', value: 0 }, ...objtype]
  103. // 下拉菜单按照 重要维保、重要维修、其他事项、综合事项 排序
  104. let orderDict = {
  105. 0: 0,
  106. 1: 1,
  107. 4: 2,
  108. 5: 3,
  109. 3: 4,
  110. }
  111. this.option = option.sort((a, b) => orderDict[a.value] - orderDict[b.value])
  112. },
  113. /**
  114. * 查询列表
  115. */
  116. async getList() {
  117. let getParams = {
  118. plazaId: this.plazaId,
  119. page: this.page,
  120. size: this.size,
  121. // TODO: 一年 改一个月
  122. changeDateStartDate: moment().subtract(1, 'years').format('YYYYMMDD000000'), //变更记录开始时间 格式yyyyMMddHHmiss 必填
  123. changeDateEndDate: moment().format('YYYYMMDD000000'), //变更记录结束时间 格式yyyyMMddHHmiss 必填
  124. }
  125. if (this.objtype !== 0) {
  126. getParams.objtype = this.objtype
  127. }
  128. let res = await getChangeList({ getParams })
  129. if (!res) {
  130. this.list = this.list.concat([])
  131. return false
  132. }
  133. this.count = res.count
  134. let listArr = res?.data || []
  135. // 处理时间
  136. listArr.map((item) => {
  137. item.date = moment(item.create_date_time).format('YYYY.MM.DD')
  138. })
  139. /**
  140. * 按照时间,构造二维数据
  141. */
  142. let list = [],
  143. __index = 0
  144. list[0] = [listArr[0]]
  145. listArr.map((item, index) => {
  146. if (index >= 1) {
  147. if (item.date === list[__index][0].date) {
  148. list[__index].push(item)
  149. } else {
  150. __index++
  151. list[__index] = [item]
  152. }
  153. }
  154. })
  155. // console.log(JSON.stringify(list, null, 2))
  156. // 第一页,直接设置list
  157. // debugger
  158. if (this.page === 1) {
  159. this.list = list
  160. } else {
  161. // 第二页之后
  162. // 将第一页,与第二页合并,并处理两页中时间一直的数据
  163. const { length } = this.list
  164. if (this.list[length - 1][0].date === list[0][0].date) {
  165. this.list = [...this.list.slice(0, length - 1), flattenDeep([this.list.slice(-1).concat(list.slice(0, 1))]), ...list.slice(1)]
  166. } else {
  167. this.list = this.list.concat(list)
  168. }
  169. }
  170. console.log(this.list)
  171. if (this.list.length === this.count) {
  172. this.loading = false
  173. }
  174. },
  175. handleObjTypeChange(data) {
  176. console.log(data)
  177. this.initData()
  178. this.getList()
  179. },
  180. /**
  181. * 更改下拉菜单,初始化数据
  182. */
  183. initData() {
  184. this.page = 1
  185. this.finished = false
  186. this.loading = false
  187. this.count = 0
  188. this.list = []
  189. },
  190. // 返回上一个页面(项目概况)
  191. backPage() {
  192. this.$router.go(-1)
  193. },
  194. /**
  195. * @param { Object } info 某一天更新记录的参数
  196. * changedate: 1599646777000
  197. content: "消防系统-商业楼/3F/室内步行街/店铺/1-消防电系统/厨房自动灭火设备-1号-动火离人设施的增设或拆除-设备拆除"
  198. create_date_time: 1599688281000
  199. date: "2020.09.10"
  200. diff: "out"
  201. gname: "f3"
  202. id: 3357
  203. objid: "4932999"
  204. objtype: 4
  205. seq: "2"
  206. siteid: "1000423"
  207. smsxt: "1003"
  208. */
  209. goToDetailInfo(info) {
  210. console.log(info)
  211. this.$router.push({ name: 'UpdateRecordDetail', params: { info } })
  212. },
  213. /**
  214. * 同步延迟器
  215. * @param { Number } timeout 延迟时间,ms
  216. */
  217. async sleep(timeout) {
  218. await new Promise((resolve) => {
  219. setTimeout(() => {
  220. resolve()
  221. }, timeout)
  222. })
  223. },
  224. async onLoad() {
  225. await this.sleep(1000)
  226. this.page++
  227. // 异步更新数据
  228. await this.getList()
  229. // 加载状态结束
  230. this.loading = false
  231. // 获取平铺后list的总条数
  232. const { length } = flattenDeep(this.list)
  233. // 查询完成
  234. if (length >= this.count) {
  235. this.finished = true
  236. }
  237. console.log(this.loading, this.finished)
  238. },
  239. },
  240. }
  241. </script>
  242. <style lang='less' scoped>
  243. .update-record {
  244. width: 100%;
  245. height: 100%;
  246. // background-color: lightblue;
  247. // 下拉菜单
  248. /deep/.van-dropdown-menu__item {
  249. justify-content: flex-start !important;
  250. padding-left: 8px;
  251. }
  252. // 主体内容
  253. .record {
  254. width: 100%;
  255. height: calc(100% - 95px);
  256. padding: 15px;
  257. background-color: #f5f6f7;
  258. overflow: auto;
  259. .record-list {
  260. width: 100%;
  261. height: 100%;
  262. .info {
  263. width: 100%;
  264. // TODO:
  265. // min-height: 103%;
  266. // min-height: 100px;
  267. // background-color: chartreuse;
  268. display: flex;
  269. .left {
  270. width: 8px;
  271. height: auto;
  272. display: flex;
  273. flex-direction: column;
  274. .dot {
  275. margin-top: 6px;
  276. width: 8px;
  277. height: 8px;
  278. background-color: #025baa;
  279. border-radius: 50%;
  280. }
  281. .line {
  282. margin: 0 auto;
  283. width: 2px;
  284. flex: 1;
  285. margin-top: 6px;
  286. background: #dcdcdc;
  287. // background-color: red;
  288. }
  289. }
  290. .right {
  291. flex: 1;
  292. padding-left: 10px;
  293. padding-bottom: 30px;
  294. .title {
  295. width: 100%;
  296. height: 20px;
  297. font-size: 14px;
  298. font-weight: 400;
  299. color: #666666;
  300. .type {
  301. margin-left: 15px;
  302. }
  303. }
  304. .content {
  305. width: 100%;
  306. height: auto;
  307. margin-top: 8px;
  308. font-size: 14px;
  309. font-weight: 400;
  310. color: #333333;
  311. line-height: 25px;
  312. background-color: #fff;
  313. padding: 12px 10px;
  314. .type {
  315. font-weight: 500;
  316. color: #333333;
  317. }
  318. }
  319. }
  320. }
  321. // 加载更多
  322. .m-load-more {
  323. width: 100%;
  324. height: 20px;
  325. line-height: 20px;
  326. margin-top: 20px;
  327. font-size: 14px;
  328. text-align: center;
  329. }
  330. }
  331. }
  332. }
  333. </style>