175 lines
4.0 KiB
Vue
175 lines
4.0 KiB
Vue
<template>
|
|
<div class="AppEquipment">
|
|
<AiTopFixed>
|
|
<div class="currentLeft-top">
|
|
<div class="left">
|
|
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" selectRoot>
|
|
<span class="label" v-if="areaName">{{ areaName }}</span>
|
|
<span v-else>请选择</span>
|
|
<u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px"/>
|
|
</AiAreaPicker>
|
|
</div>
|
|
<u-search v-model="keyword" :clearabled="true" placeholder="请输入设备名称" :show-action="false" bg-color="#F5F5F5" search-icon-color="#ccc" color="#666"
|
|
height="58" @search="getList" @clear="getListInit"></u-search>
|
|
</div>
|
|
</AiTopFixed>
|
|
<div class="record">
|
|
<div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
|
|
<img src="../img/lb@2x.png" alt="" class="voice-img">
|
|
<div class="info">
|
|
<div class="text">
|
|
<p>{{ item.name }}</p>
|
|
<span>{{ item.areaName }}</span>
|
|
</div>
|
|
<div class="status">{{ $dict.getLabel('dlbDevStatus', item.devStatus) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AiEmpty v-if="!list.length"></AiEmpty>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
|
|
export default {
|
|
name: "AppEquipment",
|
|
data() {
|
|
return {
|
|
current: 1,
|
|
areaId: '',
|
|
areaName: '',
|
|
keyword: '',
|
|
list: []
|
|
}
|
|
},
|
|
computed: {...mapState(['user'])},
|
|
onLoad() {
|
|
this.areaId = this.user.areaId
|
|
this.areaName = this.user.areaName
|
|
this.$dict.load(['dlbDevStatus']).then(() => {
|
|
this.getList()
|
|
})
|
|
},
|
|
onShow() {
|
|
document.title = '设备管理'
|
|
},
|
|
methods: {
|
|
areaSelect(e) {
|
|
this.areaId = e
|
|
this.getListInit()
|
|
},
|
|
getListInit() {
|
|
this.list = []
|
|
this.current = 1
|
|
this.getList()
|
|
},
|
|
getList() {
|
|
this.$http.post(`/app/appdlbquipment/list?current=1&size=20&name=${this.keyword}&areaId=${this.areaId}`).then((res) => {
|
|
if (res.code == 0) {
|
|
if (this.current > 1) {
|
|
this.list = [...this.list, ...res.data.records]
|
|
} else {
|
|
this.list = res.data.records
|
|
}
|
|
}
|
|
})
|
|
},
|
|
toDetail(item) {
|
|
uni.navigateTo({url: `./detail?id=${item.id}`})
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
this.current++
|
|
this.getList()
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.AppEquipment {
|
|
|
|
.currentLeft-top {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.record {
|
|
margin-top: 8px;
|
|
padding-left: 32px;
|
|
background-color: #fff;
|
|
|
|
.item {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 110px;
|
|
border-bottom: 1px solid #ddd;
|
|
box-sizing: border-box;
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
|
|
.check-img {
|
|
width: 44px;
|
|
height: 44px;
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.voice-img {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
font-size: 34px;
|
|
padding-right: 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
|
|
.text {
|
|
line-height: 1;
|
|
|
|
p {
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
span {
|
|
font-size: 26px;
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
font-weight: 500;
|
|
color: #999;
|
|
line-height: 36px;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
font-size: 34px;
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
font-weight: 500;
|
|
color: #4E8EEE;
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|