esswisdom_app/pages/deviceslist/index.vue

<template>
	<view class="container">
		<view class="custom-tabs">
		<view class="custom_box" v-for="item in baseInfo" key="index">
		 <view class="custom_title">
		 <view class="custom_title_name">设备编号</view>
		 <view class="custom_title_gl">{{item.ecId }}</view>
		 </view>
		 <view class="custom_div">
		 <view class="batteryccc">实时功率</view>
		<!-- <view class="custom_title_gl">converter.formattoFixed(item.power*1,2)<text class="batteryccc"> kW</text> </view> -->
		 </view>
		 <view class="custom_div">
		 <view class="batteryccc">在线状态</view>
		 <view v-if="item.comState==0" class="tag_type2red">离线</view>
		 <view v-else class="tag_type2">在线</view>
		 </view>
		 <view class="custom_div">
		 <view class="batteryccc">故障状态</view>
		 <view v-if="item.faultState == 0" class="tag_type2">正常</view>
		 <view  v-else class="tag_type2red">故障</view>
		
		 </view>
		 <view class="custom_div">
		 <view class="batteryccc">运行状态</view>
		 <view v-if="item.runState== 1" class="tag_type2">运行</view>
		 <view v-else class="tag_type3">停机</view>
		
		 </view>
		 <view class="custom_div">
		 <view class="batteryccc">所属电站</view>
		 <view class="custom_div1">{{item.powerName}}</view>
		 </view>
		 <view class="custom_div">
		 <view class="batteryccc">投运时间</view>
		 <view class="custom_div1">{{item.createTime}}</view>
		 </view>
		 
		</view>
		<view class="tag_typetext">没有更多数据...</view>
		</view>
		<!--
		createAt 投运时间
		comState 在线状态
		power 实时功率
		 故障状态 faultState
		 运行状态 runState
		name  名称
		 -->
		
	</view>
</template>
<!--    -->
<script>
	import request from '@/utils/request';
	import { onLoad,onHide,onShow,onUnload } from '@dcloudio/uni-app';
	export default {
		data() {
			return {
				    baseInfo:"",
					interval:""
			}
		},
		onLoad() {
			this.getmuitiStationinfo()
		},
		   onHide() {
		     // 页面隐藏时也可以选择清理定时器
		     if (this.interval) {
		       clearInterval(this.interval);
		       this.interval = null
		     }
		  },
		  onUnload(){
		     // 页面隐藏时也可以选择清理定时器
		     if (this.interval) {
		       clearInterval(this.interval);
		       this.interval = null
		     }
		  },
		 onShow(){
			 
		    // 页面再次显示时重新启动定时器
		      if (!this.interval) {
		         setIntervalDemo();
		      }
		 },
		
		 setIntervalDemo() {
		    this.interval = setInterval(() => {
				this.getmuitiStationinfo()
		       }, 10000)
		   },
		methods: {
			// /api/va/superStationsAPP/${wx.getStorageSync('station').id}
		async getmuitiStationinfo (){
			// www.economicalplus.site
				try {
				   const response = await request({
				   	url: `/connectionapp/selectems`,
				   	method: 'POST',
				   	header: {
				   		'Content-Type': 'application/x-www-form-urlencoded'
				   	}
				   
				   });
				 
					this.baseInfo = response.data;
				
				 } catch (error) {
				   console.error('登录失败:', error);
				 }
			}
		}
	}
</script>

<style scoped>
	#app{
		width: 100%;
		height: 100%;
	}
	uni-page{
			width: 100%;
			height: 100%;
		}
		uni-page-wrapper{
			width: 100%;
			height: 100%;
		}
		uni-page-body{
			width: 100%;
			height: 100%;
		}
.container {
		  height: 100%;
	    background: linear-gradient(to bottom, #007545 -40%, #f0f5f5 40%, #f0f5f5 100%);
	    box-sizing: border-box;
		display: flex;
       flex-direction: column;
	  } 
	  
	  /* pages/station/index.wxss */
	  .custom-tabs{
	    width: 100%;
	    height: 100vh;
	    padding: 0rpx 20rpx 20rpx 20rpx;
	    overflow: auto;
	  
	    box-sizing: border-box;
	  }
	  .custom_box{
	    width:100%;
	    padding: 1rpx 20rpx 20rpx 20rpx;
	    border-radius: 20rpx;
	    background-color: #ffffff;
	    box-sizing: border-box;
	    /* overflow: auto; */
	  }
	  .custom_title{
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    padding: 20rpx 0rpx;
	    border-bottom:1rpx solid #E1E0F4;
	    box-sizing: border-box;
	  }
	   .custom_title_gl{
	    font-size: 26rpx;
	    color: #222222;
	   }
	  .custom_div{
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    margin-top: 20rpx;
	  }
	  .custom_div1{
	    font-size: 26rpx;
	     color: #222222;
	  }
	  .battery{
	    font-size: 24rpx;
	     color: #222222;
	  
	    }
	    .batteryccc{
	      font-size: 26rpx;
	      color: #999999;
	      
	      }
	  .tag_type1 {
	    font-size: 28rpx;
	    color: #F0A26C;
	    font-weight: 500;
	  }
	  
	  .tag_type2 {
	    font-size: 28rpx;
	    color: #15DB9B;
	    font-weight: 500;
	  }
	  
	  .tag_type3 {
	    font-size: 28rpx;
	    color: #b0c4de;
	    font-weight: 500;
	  /* 蓝 */
	  }
	  .tag_type2red {
	    font-size: 28rpx;
	    color: red;
	    font-weight: 500;
	  /* 蓝 */
	  }
	  .custom_box{
	    margin-top: 20rpx;
	  }
	  .tag_typetext{
	  width: 100%;
	  display: flex;
	  font-size: 26rpx;
	  justify-content: center;
	  color: #b0c4de;
	  margin-top: 20rpx;
	  }
</style>