<script setup>
|
import{ ref,onMounted } from 'vue'
|
import { getParentAreaApi,searchWaterFacilityApi } from '../../api/index.js'
|
|
//区域搜索相关
|
const DaTreeRef = ref()
|
const regionListTree = ref([])
|
const selectedReigonId = ref([])
|
const selectedReigonName = ref([])
|
async function getRegionList(){
|
await getParentAreaApi().then((res) =>{
|
if(res.code == 200){
|
regionListTree.value = res.data
|
// regionListTree.value[0].children.push({id: "1", areaName: "B2栋5-1"})
|
// regionListTree.value[0].children.push({id: "2", areaName: "B2栋1"})
|
// regionListTree.value[0].children.push({id: "3", areaName: "B2栋2"})
|
// regionListTree.value[0].children.push({id: "4", areaName: "B2栋3"})
|
// regionListTree.value[0].children.push({id: "5", areaName: "B2栋4"})
|
// regionListTree.value[0].children.push({id: "6", areaName: "B2栋5"})
|
// regionListTree.value[0].children.push({id: "7", areaName: "B2栋6"})
|
// regionListTree.value[0].children.push({id: "8", areaName: "B2栋7"})
|
// regionListTree.value[0].children.push({id: "9", areaName: "B2栋8"})
|
}
|
})
|
}
|
//选中区域
|
function handleTreeChange(e,e2){
|
isExpand.value = false
|
// if(DaTreeRef.value.getHalfCheckedKeys()){
|
// selectedReigonId.value = DaTreeRef.value.getHalfCheckedKeys().concat(DaTreeRef.value.getCheckedKeys())
|
// }else{
|
selectedReigonId.value = DaTreeRef.value.getCheckedKeys()
|
console.log(123,selectedReigonId.value)
|
// }
|
setRegionName()
|
}
|
//设置选中区域名
|
function setRegionName(){
|
let nodeList
|
let nameList = []
|
//判断选中是否根节点，根节点直接取选中node值
|
if(DaTreeRef.value.getHalfCheckedNodes()){
|
nodeList = DaTreeRef.value.getHalfCheckedNodes().concat(DaTreeRef.value.getCheckedNodes())
|
}else{
|
nodeList = DaTreeRef.value.getCheckedNodes()
|
}
|
nodeList.forEach((item)=>{
|
nameList.push(item.label)
|
})
|
selectedReigonName.value = nameList.join()
|
console.log('000',selectedReigonName.value,selectedReigonId.value)
|
}
|
//搜索样式
|
const isExpand = ref(false)
|
const iconRotated = ref({
|
transform:'rotate(90deg)'
|
})
|
function setExpand(){
|
isExpand.value = isExpand.value ? false : true
|
}
|
//获取设备列表
|
const facilityList = ref([])
|
async function getList(e){
|
let postParams
|
if(e){
|
postParams = {limit:100,page:1,areaId:selectedReigonId.value[0]}
|
}else{
|
postParams = {limit:100,page:1}
|
}
|
await searchWaterFacilityApi(postParams).then((res) =>{
|
if(res.code == 200){
|
facilityList.value = res.data.list
|
facilityList.value.forEach((item) =>{
|
item.onLineStateView = item.onLineState == 1 ? '在线' : (item.onLineState == 0 ? '离线' : '')
|
})
|
}
|
})
|
}
|
function navTo(){
|
uni.navigateTo({
|
url:'/pagesAdmin/adminPlatform/facilityDetail'
|
})
|
}
|
onMounted(async() =>{
|
await getRegionList()
|
await getList()
|
})
|
</script>
|
<template>
|
<view class="container">
|
<navbar title = '设备管理'></navbar>
|
<view class="content">
|
<view class="search">
|
<view class="search-text">区域选择：</view>
|
<view class="search-box">
|
<view class="placeholder" @click="setExpand">
|
<view v-if="selectedReigonName.length > 0" class="selected-Name"><text>{{selectedReigonName}}</text></view>
|
<text v-else>分区区域</text>
|
<image class="expand-icon" :style="isExpand ? '':iconRotated" src="../../static/images/maintain/expand.svg"></image>
|
</view>
|
<view v-if="isExpand" class="search-content">
|
<DaTree ref="DaTreeRef"
|
:data="regionListTree"
|
labelField="areaName"
|
valueField="id"
|
defaultExpandAll
|
:showRadioIcon='false'
|
@change="handleTreeChange"
|
</DaTree>
|
</view>
|
</view>
|
<view @click="getList(1)" class="search-btn">搜索</view>
|
</view>
|
<view class="main">
|
<view class="item-box" v-for="(item,index) in facilityList" :key="index">
|
<view class="item">
|
<view class="item-left">
|
<text class="item-name">{{item.facilityName}}</text>
|
<view class="item-state">
|
设备状态
|
<text class="item-state-value">{{item.onLineStateView}}</text>
|
</view>
|
</view>
|
<view class="item-right" @click="navTo">
|
<text>查看详情</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.container{
|
width:100%;
|
box-sizing: border-box;
|
.content{
|
height:calc(100vh - 176rpx);
|
background: linear-gradient(to bottom,#8BC1FC 0%,#D2F2FE 30%,#D2F2FE 100%);
|
padding:30rpx 40rpx 100rpx;
|
box-sizing: border-box;
|
.search{
|
width:100%;
|
height:130rpx;
|
background:rgba(255,255,255,0.5);
|
z-index:2;
|
padding:30rpx 40rpx;
|
box-sizing: border-box;
|
border-radius:5rpx;
|
.search-text{
|
float: left;
|
line-height:70rpx;
|
color:rgba(39, 39, 39, 0.8);
|
}
|
.search-btn{
|
float: right;
|
line-height:70rpx;
|
width:100rpx;
|
height:70rpx;
|
background: #a2c5fc;
|
text-align: center;
|
border-radius: 15rpx;
|
}
|
.search-box{
|
position:relative;
|
width:100%;
|
float: left;
|
width:320rpx;
|
height:70rpx;
|
background: #fff;
|
border-radius:10rpx;
|
.placeholder{
|
height:100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
color: #85898c;
|
padding:0 10rpx 0 20rpx ;
|
box-sizing: border-box;
|
.selected-Name{
|
height:100%;
|
color: #6f7375;
|
font-size:24rpx;
|
line-height:70rpx;
|
overflow: hidden;
|
}
|
.expand-icon{
|
width:44rpx;
|
height:44rpx;
|
}
|
}
|
.search-content{
|
position: absolute;
|
margin:0 auto;
|
z-index:2;
|
float: left;
|
width:100%;
|
background: rgba(255,255,255,0.7);
|
top:80rpx;
|
}
|
}
|
}
|
.main{
|
margin-top:4%;
|
width:100%;
|
height:86%;
|
background:rgba(255, 255, 255,1);
|
padding:30rpx;
|
box-sizing: border-box;
|
border-radius:5rpx;
|
.item-box{
|
width:100%;
|
height:120rpx;
|
background: #f2f3f3;
|
margin-top:20rpx;
|
padding:20rpx;
|
box-sizing: border-box;
|
.item{
|
width:100%;
|
height:100%;
|
display:flex;
|
justify-content: space-between;
|
align-items: center;
|
.item-left{
|
height:100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
.item-name{
|
color: #3d84c7;
|
}
|
.item-state{
|
color: #9a9fa2;
|
font-size:28rpx;
|
.item-state-value{
|
color: #eebe4c;
|
}
|
}
|
}
|
.item-right{
|
color: #5281c7;
|
font-size: 30rpx;
|
}
|
}
|
|
}
|
}
|
}
|
}
|
</style>
|
