|
|
@@ -2,30 +2,31 @@
|
|
|
<div class='update-record'>
|
|
|
<van-nav-bar title='说明书更新记录' left-arrow @click-left='backPage' />
|
|
|
<van-dropdown-menu active-color='#1989fa'>
|
|
|
- <van-dropdown-item v-model='objType' :options='option' />
|
|
|
+ <van-dropdown-item v-model='objtype' :options='option' @change='hagndleObjTypeChange' />
|
|
|
</van-dropdown-menu>
|
|
|
<div class='record'>
|
|
|
<!-- 引入list,触底更新 -->
|
|
|
- <van-list class='record-list' v-model='loading' :finished='finished' finished-text='没有更多了' @load='onLoad'>
|
|
|
- <div class='info' v-for='i in list' :key='i'>
|
|
|
+ <van-list class='record-list' v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load='onLoad'>
|
|
|
+ <div class='info' v-for='(item,index) in list' :key='index'>
|
|
|
<div class='left'>
|
|
|
<div class='dot'></div>
|
|
|
<div class='line'></div>
|
|
|
</div>
|
|
|
<div class='right'>
|
|
|
<div class='title'>
|
|
|
- <span class='date'>2020.08.19 {{i}}</span>
|
|
|
+ <span class='date'>{{item[0].date}}</span>
|
|
|
</div>
|
|
|
- <div class='content' @click='goToDetailInfo'>
|
|
|
- <p class='type'>重要维保</p>
|
|
|
- <p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
|
|
|
+ <div class='content' v-for='(detail,dIndex) in item' :key='dIndex' @click='goToDetailInfo'>
|
|
|
+ <p class='type'>{{objtypeDict[detail.objtype]}}</p>
|
|
|
+ <p>{{detail.content}}</p>
|
|
|
</div>
|
|
|
- <div class='content' v-if='i===1'>
|
|
|
+ <!-- <div class='content'>
|
|
|
<p class='type'>重要维修</p>
|
|
|
<p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
|
|
|
- </div>
|
|
|
+ </div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- <div class='m-load-more' v-show='!finished && list.length && list.length<=5 && page === 1' @click='onLoad'>加载更多</div> -->
|
|
|
</van-list>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -40,54 +41,45 @@ Vue.use(NavBar)
|
|
|
Vue.use(DropdownMenu).use(DropdownItem)
|
|
|
Vue.use(List)
|
|
|
import { mapGetters } from 'vuex'
|
|
|
-// import { getChangeList } from '@/api/homePage'
|
|
|
-import { queryEventypes } from '@/api/overview'
|
|
|
+import { queryEventypes, getChangeList } from '@/api/overview'
|
|
|
import { querySelect } from '@/api/public'
|
|
|
-
|
|
|
+import moment from 'moment'
|
|
|
+import { flattenDeep } from 'lodash'
|
|
|
export default {
|
|
|
name: 'UpdateRecord',
|
|
|
props: {},
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- objType: 0,
|
|
|
+ objtype: 0,
|
|
|
option: [
|
|
|
{ text: '全部', value: 0 },
|
|
|
- { text: '重要维保', value: 1 },
|
|
|
- { text: '重要维修', value: 4 },
|
|
|
- { text: '其他事项', value: 5 },
|
|
|
- { text: '综合事项', value: 3 },
|
|
|
+ // { text: '重要维保', value: 1 },
|
|
|
+ // { text: '重要维修', value: 4 },
|
|
|
+ // { text: '其他事项', value: 5 },
|
|
|
+ // { text: '综合事项', value: 3 },
|
|
|
],
|
|
|
- // 1: '重要维保',
|
|
|
- // 3: '综合事项',
|
|
|
- // 4: '重要维修',
|
|
|
- // 5: '其他事项',
|
|
|
list: [],
|
|
|
loading: false,
|
|
|
finished: false,
|
|
|
+ page: 1,
|
|
|
+ count: 0,
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['plazaId']),
|
|
|
+ ...mapGetters(['plazaId', 'objtypeDict']),
|
|
|
},
|
|
|
created() {
|
|
|
- let params = {
|
|
|
- getParams: {
|
|
|
- plazaId: this.plazaId,
|
|
|
- page: 1,
|
|
|
- size: 100,
|
|
|
- },
|
|
|
- }
|
|
|
- getChangeList(params).then((res) => {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
+ // 查询更新记录列表
|
|
|
+ this.getList()
|
|
|
+ // 查询下拉菜单
|
|
|
this.querySelect()
|
|
|
},
|
|
|
beforeMount() {},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
/**
|
|
|
- *
|
|
|
+ * 查询事件类型 下拉菜单
|
|
|
*/
|
|
|
async querySelect() {
|
|
|
let data = {
|
|
|
@@ -102,8 +94,84 @@ export default {
|
|
|
},
|
|
|
]
|
|
|
let resData = await queryEventypes({ data, postParams })
|
|
|
+ let objtype = resData?.data?.data?.rpt_change_record?.objtype
|
|
|
console.log('%c======', 'color:blue')
|
|
|
- console.log(resData)
|
|
|
+ console.log(objtype)
|
|
|
+ objtype.map((item) => (item.text = this.objtypeDict[item.value]))
|
|
|
+ this.option = [{ text: '全部', value: 0 }, ...objtype]
|
|
|
+ console.log(this.option)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询列表
|
|
|
+ */
|
|
|
+ async getList() {
|
|
|
+ console.log('getList')
|
|
|
+ let getParams = {
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ page: this.page,
|
|
|
+ size: 5,
|
|
|
+ }
|
|
|
+ if (this.objtype !== 0) {
|
|
|
+ getParams.objtype = this.objtype
|
|
|
+ }
|
|
|
+ let res = await getChangeList({ getParams })
|
|
|
+ if (!res) {
|
|
|
+ this.list = this.list.concat([])
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.count = res.count
|
|
|
+ let listArr = res?.data || []
|
|
|
+ // 处理时间
|
|
|
+ listArr.map((item) => {
|
|
|
+ item.date = moment(item.create_date_time).format('YYYY.MM.DD')
|
|
|
+ })
|
|
|
+ /**
|
|
|
+ * 按照时间,构造二维数据
|
|
|
+ */
|
|
|
+ let list = [],
|
|
|
+ __index = 0
|
|
|
+ list[0] = [listArr[0]]
|
|
|
+ listArr.map((item, index) => {
|
|
|
+ if (index >= 1) {
|
|
|
+ if (item.date === list[__index][0].date) {
|
|
|
+ list[__index].push(item)
|
|
|
+ } else {
|
|
|
+ __index++
|
|
|
+ list[__index] = [item]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log(JSON.stringify(list, null, 2))
|
|
|
+ // 第一页,直接设置list
|
|
|
+ // debugger
|
|
|
+ if (this.page === 1) {
|
|
|
+ this.list = list
|
|
|
+ } else {
|
|
|
+ // 第二页之后
|
|
|
+ // 将第一页,与第二页合并,并处理两页中时间一直的数据
|
|
|
+ const { length } = this.list
|
|
|
+ if (this.list[length - 1][0].date === list[0][0].date) {
|
|
|
+ this.list = [...this.list.slice(0, length - 1), flattenDeep([this.list.slice(-1).concat(list.slice(0, 1))]), ...list.slice(1)]
|
|
|
+ } else {
|
|
|
+ this.list = this.list.concat(list)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.list)
|
|
|
+ },
|
|
|
+ hagndleObjTypeChange(data) {
|
|
|
+ console.log(data)
|
|
|
+ this.initData()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 更改下拉菜单,初始化数据
|
|
|
+ */
|
|
|
+ initData() {
|
|
|
+ this.page = 1
|
|
|
+ this.finished = false
|
|
|
+ this.loading = false
|
|
|
+ this.count = 0
|
|
|
+ this.list = []
|
|
|
},
|
|
|
// 返回上一个页面(项目概况)
|
|
|
backPage() {
|
|
|
@@ -112,22 +180,31 @@ export default {
|
|
|
goToDetailInfo() {
|
|
|
this.$router.push({ name: 'UpdateRecordDetail', params: { a: 1 } })
|
|
|
},
|
|
|
- onLoad() {
|
|
|
+ /**
|
|
|
+ * 同步延迟器
|
|
|
+ * @param { Number } timeout 延迟时间,ms
|
|
|
+ */
|
|
|
+ async sleep(timeout) {
|
|
|
+ await new Promise((resolve) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ resolve()
|
|
|
+ }, timeout)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async onLoad() {
|
|
|
+ await this.sleep(1000)
|
|
|
+ this.page++
|
|
|
// 异步更新数据
|
|
|
- // setTimeout 仅做示例，真实场景中一般为 ajax 请求
|
|
|
- setTimeout(() => {
|
|
|
- for (let i = 0; i < 5; i++) {
|
|
|
- this.list.push(this.list.length + 1)
|
|
|
- }
|
|
|
-
|
|
|
- // 加载状态结束
|
|
|
- this.loading = false
|
|
|
-
|
|
|
- // 数据全部加载完成
|
|
|
- if (this.list.length >= 40) {
|
|
|
- this.finished = true
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
+ await this.getList()
|
|
|
+ // 加载状态结束
|
|
|
+ this.loading = false
|
|
|
+ // 获取平铺后list的总条数
|
|
|
+ const { length } = flattenDeep(this.list)
|
|
|
+ // 查询完成
|
|
|
+ if (length >= this.count) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ console.log(this.loading, this.finished)
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
@@ -152,62 +229,74 @@ export default {
|
|
|
.record-list {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- }
|
|
|
- .info {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- display: flex;
|
|
|
- .left {
|
|
|
- width: 8px;
|
|
|
- height: auto;
|
|
|
+ .info {
|
|
|
+ width: 100%;
|
|
|
+ // TODO:
|
|
|
+ min-height: 103%;
|
|
|
+ // min-height: 100px;
|
|
|
+ // background-color: chartreuse;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .dot {
|
|
|
- margin-top: 6px;
|
|
|
+ .left {
|
|
|
width: 8px;
|
|
|
- height: 8px;
|
|
|
- background-color: #025baa;
|
|
|
- border-radius: 50%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .dot {
|
|
|
+ margin-top: 6px;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background-color: #025baa;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 2px;
|
|
|
+ flex: 1;
|
|
|
+ margin-top: 6px;
|
|
|
+ background: #dcdcdc;
|
|
|
+ // background-color: red;
|
|
|
+ }
|
|
|
}
|
|
|
- .line {
|
|
|
- margin: 0 auto;
|
|
|
- width: 2px;
|
|
|
+ .right {
|
|
|
flex: 1;
|
|
|
- margin-top: 6px;
|
|
|
- background: #dcdcdc;
|
|
|
- // background-color: red;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- padding-left: 10px;
|
|
|
- padding-bottom: 30px;
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- .type {
|
|
|
- margin-left: 15px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ .type {
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- height: 95px;
|
|
|
- margin-top: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- line-height: 25px;
|
|
|
- background-color: #fff;
|
|
|
- padding: 12px 10px;
|
|
|
- .type {
|
|
|
- font-weight: 500;
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
color: #333333;
|
|
|
+ line-height: 25px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 12px 10px;
|
|
|
+ .type {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // 加载更多
|
|
|
+ .m-load-more {
|
|
|
+ width: 100%;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
yunxing