123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334 |
- <template>
- <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' @change='handleObjTypeChange' />
- </van-dropdown-menu>
- <div class='record'>
- <!-- 引入list,触底更新 -->
- <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'>{{item[0].date}}</span>
- </div>
- <div class='content' v-for='(detail,dIndex) in item' :key='dIndex' @click='goToDetailInfo(detail)'>
- <p class='type'>{{objtypeDict[detail.objtype]}}</p>
- <p>{{detail.content}}</p>
- </div>
- <!-- <div class='content'>
- <p class='type'>重要维修</p>
- <p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
- </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>
- </template>
- <script>
- /**
- * 说明书更新记录
- */
- import Vue from 'vue'
- import { NavBar, DropdownMenu, DropdownItem, List } from 'vant'
- Vue.use(NavBar)
- Vue.use(DropdownMenu).use(DropdownItem)
- Vue.use(List)
- import { mapGetters } from 'vuex'
- 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,
- option: [
- // { text: '全部', value: 0 },
- // { text: '重要维保', value: 1 },
- // { text: '重要维修', value: 4 },
- // { text: '其他事项', value: 5 },
- // { text: '综合事项', value: 3 },
- ],
- list: [],
- loading: false,
- finished: false,
- page: 1,
- size: 6,
- count: 0,
- }
- },
- computed: {
- ...mapGetters(['plazaId', 'objtypeDict']),
- },
- created() {
- // 查询更新记录列表
- this.getList()
- // 查询下拉菜单
- this.querySelect()
- },
- beforeMount() {},
- mounted() {},
- methods: {
- /**
- * 查询事件类型 下拉菜单
- */
- async querySelect() {
- let data = {
- plazaId: this.plazaId,
- },
- postParams = [
- {
- tableName: 'rpt_change_record',
- columnName: {
- objtype: 'objtype',
- },
- },
- ]
- let resData = await queryEventypes({ data, postParams })
- let objtype = resData?.data?.data?.rpt_change_record?.objtype
- console.log('%c======', 'color:blue')
- console.log(objtype)
- objtype.map((item) => (item.text = this.objtypeDict[item.value]))
- let option = [{ text: '全部', value: 0 }, ...objtype]
- // 下拉菜单按照 重要维保、重要维修、其他事项、综合事项 排序
- let orderDict = {
- 0: 0,
- 1: 1,
- 4: 2,
- 5: 3,
- 3: 4,
- }
- this.option = option.sort((a, b) => orderDict[a.value] - orderDict[b.value])
- },
- /**
- * 查询列表
- */
- async getList() {
- let getParams = {
- plazaId: this.plazaId,
- page: this.page,
- size: this.size,
- // TODO: 一年 改一个月
- changeDateStartDate: moment().subtract(1, 'years').format('YYYYMMDD000000'), //变更记录开始时间 格式yyyyMMddHHmiss 必填
- changeDateEndDate: moment().format('YYYYMMDD000000'), //变更记录结束时间 格式yyyyMMddHHmiss 必填
- }
- 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)
- if (this.list.length === this.count) {
- this.loading = false
- }
- },
- handleObjTypeChange(data) {
- console.log(data)
- this.initData()
- this.getList()
- },
- /**
- * 更改下拉菜单,初始化数据
- */
- initData() {
- this.page = 1
- this.finished = false
- this.loading = false
- this.count = 0
- this.list = []
- },
- // 返回上一个页面(项目概况)
- backPage() {
- this.$router.go(-1)
- },
- /**
- * @param { Object } info 某一天更新记录的参数
- * changedate: 1599646777000
- content: "消防系统-商业楼/3F/室内步行街/店铺/1-消防电系统/厨房自动灭火设备-1号-动火离人设施的增设或拆除-设备拆除"
- create_date_time: 1599688281000
- date: "2020.09.10"
- diff: "out"
- gname: "f3"
- id: 3357
- objid: "4932999"
- objtype: 4
- seq: "2"
- siteid: "1000423"
- smsxt: "1003"
- */
- goToDetailInfo(info) {
- console.log(info)
- this.$router.push({ name: 'UpdateRecordDetail', params: { info } })
- },
- /**
- * 同步延迟器
- * @param { Number } timeout 延迟时间,ms
- */
- async sleep(timeout) {
- await new Promise((resolve) => {
- setTimeout(() => {
- resolve()
- }, timeout)
- })
- },
- async onLoad() {
- await this.sleep(1000)
- this.page++
- // 异步更新数据
- 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)
- },
- },
- }
- </script>
- <style lang='less' scoped>
- .update-record {
- width: 100%;
- height: 100%;
- // background-color: lightblue;
- // 下拉菜单
- /deep/.van-dropdown-menu__item {
- justify-content: flex-start !important;
- padding-left: 8px;
- }
- // 主体内容
- .record {
- width: 100%;
- height: calc(100% - 95px);
- padding: 15px;
- background-color: #f5f6f7;
- overflow: auto;
- .record-list {
- width: 100%;
- height: 100%;
- .info {
- width: 100%;
- // TODO:
- // min-height: 103%;
- // min-height: 100px;
- // background-color: chartreuse;
- display: flex;
- .left {
- width: 8px;
- 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;
- }
- }
- .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;
- }
- }
- .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;
- }
- }
- }
- }
- </style>
|