From 98a835cc45adbe5ef8ee3cca5ad478f7df673b80 Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期三, 27 十一月 2024 17:20:33 +0800
Subject: [PATCH] 添加设备管理列表
---
pagesAdmin/adminPlatform/facility.vue | 248 ++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 243 insertions(+), 5 deletions(-)
diff --git a/pagesAdmin/adminPlatform/facility.vue b/pagesAdmin/adminPlatform/facility.vue
index 0d9ca6c..7418124 100644
--- a/pagesAdmin/adminPlatform/facility.vue
+++ b/pagesAdmin/adminPlatform/facility.vue
@@ -1,13 +1,251 @@
<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>
-
+ <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>
-
+<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>
--
Gitblit v1.9.3