|
@@ -11,8 +11,39 @@
|
|
|
<van-search class='equipment-search' v-model='keyword' placeholder='请输入编号' @search='onSearch'></van-search>
|
|
|
</div>
|
|
|
<!-- 一个类的设备,如螺旋式冷水机组 -->
|
|
|
+ <van-list
|
|
|
+ class='equipment-container'
|
|
|
+ :class='{"one-list":list.length === 1}'
|
|
|
+ v-model='loading'
|
|
|
+ :finished='finished'
|
|
|
+ @load='onLoad'
|
|
|
+ finished-text
|
|
|
+ >
|
|
|
+ <div class='switch-room' v-for='(item,index) in list' :key='index'>
|
|
|
+ <!-- title -->
|
|
|
+ <div class='title' v-show='item.data.length'>
|
|
|
+ <span>{{item.classqc}}</span>
|
|
|
+ <span>{{item.count}}</span>
|
|
|
+ </div>
|
|
|
+ <!-- 第1页 -->
|
|
|
+ <van-cell is-link v-for='detail in item.data.slice(0,innerSize) || []' @click='goToDetail(detail)' :key='detail.classstructureid'>
|
|
|
+ <!-- 使用 title 插槽来自定义标题 -->
|
|
|
+ <template #title>
|
|
|
+ <span class='number'>{{detail.classstructureid}}</span>
|
|
|
+ <span class='name'>{{detail.sbjc}}</span>
|
|
|
+ </template>
|
|
|
+ <template #right-icon>
|
|
|
+ <span class='wx' v-if='detail._type === "维修"'>维修</span>
|
|
|
+ <span class='wb' v-else-if='detail._type === "维保"'>维保</span>
|
|
|
+ <van-icon name='arrow' class='arrow-icon' />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <!-- 加载更多 -->
|
|
|
+ <div class='load-more' v-show='item.loadMore && item.data && item.data.length>=5' @click='locationLoadMore(item,index)'>加载更多</div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
<div class='equipment-container' v-if='1'>
|
|
|
- <div class='switch-room' v-for='ii in 3' :key='ii'>
|
|
|
+ <div class='switch-room' v-for='ii in 0' :key='ii'>
|
|
|
<div class='title'>
|
|
|
<span>螺旋式冷水机组</span>
|
|
|
<span>10</span>
|
|
@@ -87,7 +118,7 @@ import { NavBar, Search, List, Cell, Icon, Popup, Button, Empty } from 'vant'
|
|
|
Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon).use(Popup).use(Button).use(Empty)
|
|
|
import { mapGetters } from 'vuex'
|
|
|
|
|
|
-import { querySmsLocation } from '@/api/equipmentList'
|
|
|
+import { queryMoreAsset, queryAssetClass, queryEquipmentList } from '@/api/equipmentList'
|
|
|
import { queryPic } from '@/api/public'
|
|
|
import ImagePreview from '@/components/ImagePreview'
|
|
|
import { sleep } from '@/utils/util'
|
|
@@ -102,7 +133,8 @@ export default {
|
|
|
title: '更多设备',
|
|
|
keyword: '',
|
|
|
page: 1,
|
|
|
- size: 20, //TODO: size1500
|
|
|
+ size: 5,
|
|
|
+ innerSize: 4,
|
|
|
list: [],
|
|
|
loading: false,
|
|
|
finished: false,
|
|
@@ -132,110 +164,16 @@ export default {
|
|
|
system: '',
|
|
|
sbss: '全部',
|
|
|
},
|
|
|
- mockList: [
|
|
|
- {
|
|
|
- assetid: 1206624,
|
|
|
- assetnum: '26466',
|
|
|
- assetuid: 1221607,
|
|
|
- category_code: 'gde',
|
|
|
- classstructureid: '1932',
|
|
|
- floorcode: 'B2',
|
|
|
- fws: '上海恒锦动力科技有限公司',
|
|
|
- importance: 12,
|
|
|
- is_detecting: false,
|
|
|
- is_exception: false,
|
|
|
- manufacturer: '上海恒锦动力科技有限公司',
|
|
|
- sb_status: '运行',
|
|
|
- sbglgs: '商管',
|
|
|
- sbjbm: '1',
|
|
|
- sbjc: '发电机',
|
|
|
- sbxh: 'MX-1030-4',
|
|
|
- seq: -200,
|
|
|
- sl: 1,
|
|
|
- system_code: '1001',
|
|
|
- type_code: 'gd0112',
|
|
|
- type_name: '柴油发电机组',
|
|
|
- wzjc: '商业楼/B2/地下建筑-发电机房-地下1层车库发电机房',
|
|
|
- },
|
|
|
- {
|
|
|
- assetid: 1206624,
|
|
|
- assetnum: '26466',
|
|
|
- assetuid: 1221607,
|
|
|
- category_code: 'gde',
|
|
|
- classstructureid: '1933',
|
|
|
- floorcode: 'B2',
|
|
|
- fws: '上海恒锦动力科技有限公司',
|
|
|
- importance: 12,
|
|
|
- is_detecting: false,
|
|
|
- is_exception: false,
|
|
|
- manufacturer: '上海恒锦动力科技有限公司',
|
|
|
- sb_status: '运行',
|
|
|
- sbglgs: '商管',
|
|
|
- sbjbm: '1',
|
|
|
- sbjc: '发电机',
|
|
|
- sbxh: 'MX-1030-4',
|
|
|
- seq: -200,
|
|
|
- sl: 1,
|
|
|
- system_code: '1001',
|
|
|
- type_code: 'gd0112',
|
|
|
- type_name: '柴油发电机组',
|
|
|
- wzjc: '商业楼/B2/地下建筑-发电机房-地下2层车库发电机房',
|
|
|
- },
|
|
|
- {
|
|
|
- assetid: 1206624,
|
|
|
- assetnum: '26466',
|
|
|
- assetuid: 1221607,
|
|
|
- category_code: 'gde',
|
|
|
- classstructureid: '1933',
|
|
|
- floorcode: 'B2',
|
|
|
- fws: '上海恒锦动力科技有限公司',
|
|
|
- importance: 12,
|
|
|
- is_detecting: false,
|
|
|
- is_exception: false,
|
|
|
- manufacturer: '上海恒锦动力科技有限公司',
|
|
|
- sb_status: '运行',
|
|
|
- sbglgs: '商管',
|
|
|
- sbjbm: '1',
|
|
|
- sbjc: '发电机',
|
|
|
- sbxh: 'MX-1030-4',
|
|
|
- seq: -200,
|
|
|
- sl: 1,
|
|
|
- system_code: '1001',
|
|
|
- type_code: 'gd0112',
|
|
|
- type_name: '柴油发电机组',
|
|
|
- wzjc: '商业楼/B2/地下建筑-发电机房-地下3层车库发电机房',
|
|
|
- },
|
|
|
- {
|
|
|
- assetid: 1206624,
|
|
|
- assetnum: '26466',
|
|
|
- assetuid: 1221607,
|
|
|
- category_code: 'gde',
|
|
|
- classstructureid: '1933',
|
|
|
- floorcode: 'B2',
|
|
|
- fws: '上海恒锦动力科技有限公司',
|
|
|
- importance: 12,
|
|
|
- is_detecting: false,
|
|
|
- is_exception: false,
|
|
|
- manufacturer: '上海恒锦动力科技有限公司',
|
|
|
- sb_status: '运行',
|
|
|
- sbglgs: '商管',
|
|
|
- sbjbm: '1',
|
|
|
- sbjc: '发电机',
|
|
|
- sbxh: 'MX-1030-4',
|
|
|
- seq: -200,
|
|
|
- sl: 1,
|
|
|
- system_code: '1001',
|
|
|
- type_code: 'gd0112',
|
|
|
- type_name: '柴油发电机组',
|
|
|
- wzjc: '商业楼/B2/地下建筑-发电机房-地下4层车库发电机房',
|
|
|
- },
|
|
|
- ],
|
|
|
+ noDataFlag: false,
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters(['plazaId', 'smsxt', 'categoryId']),
|
|
|
},
|
|
|
- created() {},
|
|
|
+ created() {
|
|
|
+ this.system_code = this.smsxt
|
|
|
+ this.onLoad()
|
|
|
+ },
|
|
|
beforeMount() {},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
@@ -252,12 +190,104 @@ export default {
|
|
|
this.loadMore = false
|
|
|
this.sbssList = [{ text: '全部', code: '', active: 'active' }]
|
|
|
// 查询筛选条件的 设备设施
|
|
|
- // this.getSbss()
|
|
|
+ this.getSbss()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取设备列表
|
|
|
+ */
|
|
|
+ async getList() {
|
|
|
+ let data = {
|
|
|
+ page: this.page,
|
|
|
+ size: this.size,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ onlyMainAsset: true,
|
|
|
+ }
|
|
|
+ let postParams = {
|
|
|
+ system_code: this.system_code,
|
|
|
+ }
|
|
|
+ // 筛选后,专业系统选择全部, 删除上传system_code的字段
|
|
|
+ if (!this.system_code || this.system_code === '全部') {
|
|
|
+ delete postParams.system_code
|
|
|
+ }
|
|
|
+ // TODO: 筛选后, 使用classstructureid字段
|
|
|
+ if (this.sbss_code) {
|
|
|
+ data.classstructureid = this.sbss_code
|
|
|
+ }
|
|
|
+ // TODO: keyword
|
|
|
+ if (this.keyword) {
|
|
|
+ data.keyword = `${this.keyword}:sbjc,assetnum;`
|
|
|
+ }
|
|
|
+ let res = await queryMoreAsset({ data, postParams })
|
|
|
+ if (!res?.data?.data) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ console.log(res?.data)
|
|
|
+ res.data.data.map((item, index, arr) => {
|
|
|
+ // console.log(item)
|
|
|
+ if (item?.count >= 4 || item?.data?.length >= 4) {
|
|
|
+ // console.log(item)
|
|
|
+ arr[index] = {
|
|
|
+ ...item,
|
|
|
+ loadMore: true,
|
|
|
+ loading: true,
|
|
|
+ finished: false,
|
|
|
+ list: [],
|
|
|
+ page: 2,
|
|
|
+ size: this.innerSize,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ item.loadMore = false
|
|
|
+ }
|
|
|
+ if (!item.data) {
|
|
|
+ item.data = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.list = [...this.list, ...res.data.data]
|
|
|
+ // console.log('%csssss', 'color:blue')
|
|
|
+ // console.log(this.list)
|
|
|
+ this.count = res.data.count
|
|
|
+ // 是否显示无数据的标志
|
|
|
+ let noDataFlag = !Boolean(this.list.filter((v) => v.data.length).length)
|
|
|
+ console.log(noDataFlag)
|
|
|
+ this.noDataFlag = noDataFlag
|
|
|
+ },
|
|
|
+ async onLoad() {
|
|
|
+ console.log('onload')
|
|
|
+ if (this.page > 1) {
|
|
|
+ await sleep(1000)
|
|
|
+ }
|
|
|
+ await this.getList()
|
|
|
+ this.page++
|
|
|
+ this.loading = false
|
|
|
+ if (this.list.length >= this.count) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ *
|
|
|
+ */
|
|
|
+ locationLoadMore() {},
|
|
|
+ /**
|
|
|
+ * 跳转设备详情页
|
|
|
+ */
|
|
|
+ goToDetail(detail) {
|
|
|
+ const { assetid } = detail
|
|
|
+ assetid && this.$router.push({ name: 'AssetDetail', query: { assetid } })
|
|
|
},
|
|
|
onSearch() {
|
|
|
// 初始化数据,查询列表
|
|
|
},
|
|
|
/**
|
|
|
+ * 初始化数据,查询列表
|
|
|
+ */
|
|
|
+ initData() {
|
|
|
+ this.finished = false
|
|
|
+ this.page = 1
|
|
|
+ this.count = 0
|
|
|
+ this.list = []
|
|
|
+ },
|
|
|
+ /**
|
|
|
* popup 更改系统
|
|
|
*/
|
|
|
changeSystem(data) {
|
|
@@ -271,34 +301,85 @@ export default {
|
|
|
})
|
|
|
// 弹窗选中的系统
|
|
|
this.$set(this.modalDataBak, 'system', data.smsxt)
|
|
|
- // this.getSbss(data.smsxt)
|
|
|
+ this.getSbss(data.smsxt)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * popup 更改设备设施
|
|
|
+ */
|
|
|
+ changeSbss(data) {
|
|
|
+ let sbssList = this.sbssList
|
|
|
+ sbssList.map((item) => {
|
|
|
+ item.active = ''
|
|
|
+ if (item.text === data.text && item.code === data.code) {
|
|
|
+ item.active = 'active'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 弹窗选中的系统
|
|
|
+ // TODO: 111
|
|
|
+ console.log(data)
|
|
|
+ this.$set(this.modalDataBak, 'sbss', data.code)
|
|
|
},
|
|
|
/**
|
|
|
+ * 获取设备设施筛选条件
|
|
|
+ * @param smsxt 右弹窗 更改专业系统传递参数
|
|
|
+ */
|
|
|
+ async getSbss(smsxt) {
|
|
|
+ console.log(this.smsxt, this.system_code)
|
|
|
+ let getParams = {
|
|
|
+ system_code: smsxt || this.smsxt,
|
|
|
+ }
|
|
|
+ if (smsxt === '全部') {
|
|
|
+ delete getParams.system_code
|
|
|
+ }
|
|
|
+ let resData = await queryAssetClass({ getParams })
|
|
|
+ console.log(resData)
|
|
|
+ if (!resData && !resData?.data) {
|
|
|
+ this.sbssList = [{ text: '全部', code: '全部', active: 'active' }]
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let res_data = resData.data || []
|
|
|
+ let sbssList = []
|
|
|
+ res_data.map((item) => {
|
|
|
+ sbssList.push({
|
|
|
+ text: item.classqc,
|
|
|
+ active: '',
|
|
|
+ // code: detail.systemqm,
|
|
|
+ code: item.classstructureid,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.sbssList = [{ text: '全部', code: '全部', active: 'active' }, ...sbssList]
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
* 重置
|
|
|
*/
|
|
|
reset() {
|
|
|
- // this.modalDataBak = {
|
|
|
- // system: '',
|
|
|
- // }
|
|
|
- // this.modalData = {
|
|
|
- // system: '',
|
|
|
- // }
|
|
|
- // this.system_code = this.smsxt
|
|
|
+ this.modalDataBak = {
|
|
|
+ system: '',
|
|
|
+ sbss: '全部',
|
|
|
+ }
|
|
|
+ this.modalData = {
|
|
|
+ system: '',
|
|
|
+ sbss: '全部',
|
|
|
+ }
|
|
|
+ this.system_code = this.smsxt
|
|
|
+ this.sbss_code = ''
|
|
|
this.showPopup = false
|
|
|
// 初始化数据,查询列表
|
|
|
- // this.initData()
|
|
|
- // this.onLoad()
|
|
|
+ this.initData()
|
|
|
+ this.onLoad()
|
|
|
},
|
|
|
/**
|
|
|
* 弹窗确认
|
|
|
*/
|
|
|
confirm() {
|
|
|
- // this.modalData = cloneDeep(this.modalDataBak)
|
|
|
+ this.modalData = cloneDeep(this.modalDataBak)
|
|
|
this.showPopup = false
|
|
|
- // this.system_code = this.modalData.system
|
|
|
+ this.system_code = this.modalData.system
|
|
|
+ this.sbss_code = this.modalData.sbss
|
|
|
// 初始化数据,查询列表
|
|
|
- // this.initData()
|
|
|
- // this.onLoad()
|
|
|
+ this.initData()
|
|
|
+ this.onLoad()
|
|
|
},
|
|
|
},
|
|
|
}
|