|
@@ -7,14 +7,30 @@
|
|
|
<i class='iconfont wanda-scan'></i>
|
|
|
</template>
|
|
|
</van-nav-bar>
|
|
|
- <van-search class='equipment-search' v-model='keyWord' background='#F5F6F7' show-action placeholder='请输入搜索关键词' @search='onSearch'>
|
|
|
- <template #action>
|
|
|
+ <div class='equipment-search-container'>
|
|
|
+ <van-search class='equipment-search' v-model='keyWord' placeholder='请输入设备关键字或编号' @search='onSearch'>
|
|
|
+ <!-- <template #action>
|
|
|
<div class='search' @click='onSearch'>搜索</div>
|
|
|
- </template>
|
|
|
- </van-search>
|
|
|
- <van-list class='equipment-list' v-model='loading' :finished='finished' finished-text='已经到底了' @load='onLoad'>
|
|
|
- <van-cell v-for='item in list' :key='item' :title='item' />
|
|
|
- </van-list>
|
|
|
+ </template>-->
|
|
|
+ </van-search>
|
|
|
+ </div>
|
|
|
+ <div class='equipment-list'>
|
|
|
+ <van-list v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load='onLoad'>
|
|
|
+ <!-- <van-cell v-for='item in list' :key='item' :title='item' /> -->
|
|
|
+ <van-cell is-link v-for='item in list' :key='item.classstructureid'>
|
|
|
+ <!-- 使用 title 插槽来自定义标题 -->
|
|
|
+ <template #title>
|
|
|
+ <span class='number'>{{item.classstructureid}}</span>
|
|
|
+ <span class='name'>{{item.sbjc}}</span>
|
|
|
+ </template>
|
|
|
+ <template #right-icon>
|
|
|
+ <span class='wx' v-if='item._type === "维修"'>维修</span>
|
|
|
+ <span class='wb' v-else-if='item._type === "维保"'>维保</span>
|
|
|
+ <van-icon name='arrow' class='arrow-icon' />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -24,12 +40,12 @@
|
|
|
*
|
|
|
*/
|
|
|
import Vue from 'vue'
|
|
|
-import { NavBar, Search, List, Cell } from 'vant'
|
|
|
-Vue.use(NavBar).use(Search).use(List).use(Cell)
|
|
|
+import { NavBar, Search, List, Cell, Icon } from 'vant'
|
|
|
+Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon)
|
|
|
import { mapGetters } from 'vuex'
|
|
|
|
|
|
import { queryEquipmentList } from '@/api/equipmentList'
|
|
|
-
|
|
|
+import { sleep } from '@/utils/util'
|
|
|
export default {
|
|
|
name: 'EngineRoomPicture',
|
|
|
props: {},
|
|
@@ -37,6 +53,8 @@ export default {
|
|
|
return {
|
|
|
title: '',
|
|
|
keyWord: '',
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
list: [],
|
|
|
loading: false,
|
|
|
finished: false,
|
|
@@ -52,6 +70,7 @@ export default {
|
|
|
let { title, category_code } = this.$route.params
|
|
|
this.title = title
|
|
|
this.category_code = category_code
|
|
|
+ this.onLoad()
|
|
|
},
|
|
|
beforeMount() {},
|
|
|
mounted() {},
|
|
@@ -70,18 +89,41 @@ export default {
|
|
|
page: this.page,
|
|
|
size: this.size,
|
|
|
plazaId: this.plazaId,
|
|
|
+ category_code: this.category_code,
|
|
|
},
|
|
|
postParams = { system_code: this.smsxt }
|
|
|
- let resData = queryEquipmentList({ data, postParams })
|
|
|
+ let resData = await queryEquipmentList({ data, postParams })
|
|
|
if (!resData && !resData?.data) {
|
|
|
return false
|
|
|
}
|
|
|
+ let res_data = resData.data?.data || []
|
|
|
+ res_data.map((item) => {
|
|
|
+ item._type = '正常'
|
|
|
+ // 检测中
|
|
|
+ if (item.is_detecting) {
|
|
|
+ item._type = '维保'
|
|
|
+ }
|
|
|
+ // 异常
|
|
|
+ if (item.is_exception) {
|
|
|
+ item._type = '维修'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.list = this.list.concat(res_data)
|
|
|
+ this.count = resData.data?.count
|
|
|
+ console.log(JSON.stringify(res_data, null, 2))
|
|
|
},
|
|
|
- onLoad() {
|
|
|
+ async onLoad() {
|
|
|
console.log('onload')
|
|
|
+ // await sleep(1000)
|
|
|
+ await this.getList()
|
|
|
+ this.page++
|
|
|
+ this.loading = false
|
|
|
+ if (this.list.length >= this.count) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
// 异步更新数据
|
|
|
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
|
|
|
- setTimeout(() => {
|
|
|
+ /* setTimeout(() => {
|
|
|
for (let i = 0; i < 10; i++) {
|
|
|
this.list.push(this.list.length + 1)
|
|
|
}
|
|
@@ -93,12 +135,15 @@ export default {
|
|
|
if (this.list.length >= 40) {
|
|
|
this.finished = true
|
|
|
}
|
|
|
- }, 1000)
|
|
|
+ }, 1000) */
|
|
|
+ this.getList()
|
|
|
},
|
|
|
/**
|
|
|
* 搜索
|
|
|
*/
|
|
|
- onSearch() {},
|
|
|
+ onSearch() {
|
|
|
+
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -106,18 +151,76 @@ export default {
|
|
|
.equipment-page {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-color: lightblue;
|
|
|
+ background-color: #f5f6f7;
|
|
|
// 返回箭头修改
|
|
|
/deep/ .van-nav-bar .van-icon {
|
|
|
color: #000;
|
|
|
}
|
|
|
// 搜索
|
|
|
- .equipment-search{
|
|
|
-
|
|
|
+ .equipment-search-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 55px;
|
|
|
+ // background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ .equipment-search {
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .van-search__content {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
}
|
|
|
.equipment-list {
|
|
|
- height: calc(100% - 45px);
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ min-height: 1px;
|
|
|
+ max-height: calc(100% - 100px);
|
|
|
overflow: auto;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ /deep/ .van-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .van-cell__title {
|
|
|
+ display: flex;
|
|
|
+ vertical-align: center;
|
|
|
+ .number {
|
|
|
+ width: 35px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: inherit !important;
|
|
|
+ color: #333333 !important;
|
|
|
+ }
|
|
|
+ // 维修
|
|
|
+ .wx,
|
|
|
+ .wb {
|
|
|
+ color: #d83931;
|
|
|
+ display: inline-block;
|
|
|
+ width: 44px;
|
|
|
+ margin-right: 10px;
|
|
|
+ background: #fbeceb;
|
|
|
+ border-radius: 2px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .wb {
|
|
|
+ color: #0481e1;
|
|
|
+ background: #e6f3fc;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|