yjtgq-app/pages/index/pageLl.vue

<template>
	<view>
		<div class="countCard">
			<div class="countCard_text">超声波时差法测流设备状态</div>
			<div class="countCard_tab">
				<div class="countCard_tab_content" @click="name => online = !online" :class="{ active: online }">
					<div class="countCard_tab_content_top">
						<div class="countCard_tab_content_top_icon" style="color:#02A7F0;background: #d2ebfb;">在线</div>
					</div>
					<div class="countCard_tab_content_text">
						<span style="color:#02A7F0">{{onlineNum}}</span>
						<span style="font-size: 12px;margin-left: 5px;">个</span>
					</div>
				</div>
				<div class="countCard_tab_content" @click="name => outline = !outline" :class="{ active: outline }">
					<div class="countCard_tab_content_top">
						<div class="countCard_tab_content_top_icon" style="color:#ffffff;background: #e79e42;">离线</div>
					</div>
					<div class="countCard_tab_content_text">
						<span style="color:#e79e42">{{outlineNum}}</span>
						<span style="font-size: 12px;margin-left: 5px;">个</span>
					</div>
				</div>
			</div>
		</div>
		<div class="countCard2">
			<u-search placeholder="请输入" v-model="keyword" :showAction="false"></u-search>
		</div>
		<div class="scollBox">
			<llItem v-for="(item, index) in listData" :key="name" :record="item"></llItem>
		</div>
	</view>
</template>

<script>
	import llItem from "./llItem.vue"
	
	export default {
		components: { llItem },
		data() {
			return {
				online:true,
				onlineNum:0,
				outline:true,
				outlineNum:0,
				keyword:null,
				data:[]
			}
		},
		mounted() {
			this.getData()
		},
		computed: {
			listData() {
				let list = this.data||[]
				//筛选在线
				if( this.online && !this.outline){
					list = list.filter(item=>item.status==='1')
				}
				//筛选离线
				if( !this.online && this.outline){
					list = list.filter(item=>item.status==='0')
				}
				//清空
				if( !this.online && !this.outline){
					list = []
				}
				if( this.keyword ){
					list = list.filter(item=>item.name.indexOf(this.keyword)>-1)
				}
				
				return list
			},
		},
		methods: {
			getData() {
				// uni.request(
				// {
				//   url: 'http://223.75.53.141:83/gunshiApp/tsg/osmoticShiftR/page',
				//   method: 'POST',
				//   data: {
				// 		"pageSo": {
				// 			"pageSize": 25,
				// 			"pageNumber": 1
				// 		},
				// 		"dateTimeRangeSo": {
				// 			"start": "2025-11-06 00:00:00",
				// 			"end": "2025-11-13 23:59:59"
				// 		}
				// 	},
				//   header: {
				//     'Content-Type': 'application/json',
				//     'gs-token': 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImI4YTlkN2M5LWNkMWUtNDNlMy05OTk5LTU1MDU5ZDU2MTIxNCJ9.naWxM9v66YuVvM1g2KbZgBxQAumkJ3CUQbWoLTuUy5UdoxdWVr8gSxF6nLphFOa_mdqiPKaTySu6ayslR179bQ'
				//   },
				//   success: (res) => {
				// 	  if(res.data.code!==200){return}
				// 	  this.data = res?.data?.data?.records||[]
				//     console.log('成功:', this.data);
				//   },
				//   fail: (err) => {
				//     console.log('失败:', err);
				//   }
				// });
				setTimeout(()=>{
					const myData = [
						// { name: 'XXX时差法测流站1', status: '1', updateTime: '2025-11-22 11:00', ph: '7.5', totalPhosphorus: '0.03', totalNitrogen: '0.03', ammoniaNitrogen: '0.03' },
						// { name: 'XXX时差法测流站2', status: '1', updateTime: '2025-11-22 11:00', ph: '7.5', totalPhosphorus: '0.03', totalNitrogen: '0.03', ammoniaNitrogen: '0.03' },
						// { name: 'XXX时差法测流站3', status: '1', updateTime: '2025-11-22 11:00', ph: '7.5', totalPhosphorus: '0.03', totalNitrogen: '0.03', ammoniaNitrogen: '0.03' },
						// { name: 'XXX时差法测流站5', status: '0', updateTime: '2025-11-21 11:00', ph: '7.5', totalPhosphorus: '0.03', totalNitrogen: '0.03', ammoniaNitrogen: '0.03' },
						// { name: 'XXX时差法测流站6', status: '0', updateTime: '2025-11-21 11:00', ph: '7.5', totalPhosphorus: '0.03', totalNitrogen: '0.03', ammoniaNitrogen: '0.03' },
						// { name: 'XXX时差法测流站7', status: '1', updateTime: '2025-11-21 11:00', ph: '7.5', totalPhosphorus: '0.03', totalNitrogen: '0.03', ammoniaNitrogen: '0.03' },
						// { name: 'XXX时差法测流站8', status: '1', updateTime: '2025-11-21 11:00', ph: '7.5', totalPhosphorus: '0.03', totalNitrogen: '0.03', ammoniaNitrogen: '0.03' },
						// { name: 'XXX时差法测流站9', status: '1', updateTime: '2025-11-21 11:00', ph: '7.5', totalPhosphorus: '0.03', totalNitrogen: '0.03', ammoniaNitrogen: '0.03' },
						// { name: 'XXX时差法测流站10', status: '1', updateTime: '2025-11-21 11:00', ph: '7.5', totalPhosphorus: '0.03', totalNitrogen: '0.03', ammoniaNitrogen: '0.03' },
						// { name: 'XXX时差法测流站11', status: '1', updateTime: '2025-11-21 11:00', ph: '7.5', totalPhosphorus: '0.03', totalNitrogen: '0.03', ammoniaNitrogen: '0.03' },
					]
					let onlineNum = 0
					let outlineNum = 0
					myData.map((item)=>{
						if(item.status==='0'){
							outlineNum = outlineNum+1
						}
						if(item.status==='1'){
							onlineNum = onlineNum+1
						}	
					})
					this.onlineNum = onlineNum
					this.outlineNum = outlineNum
					this.data = myData
				},500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.countCard{
		width: calc( 100% - 32px );
		margin: 5px;
		margin-top: 10px;
		padding: 10px;
		background: #ffffff;
		border-radius: 5px;
		border: 1px solid #eee;
	}
	.countCard2{
		width: calc( 100% - 32px );
		margin: 5px;
		margin-top: 5px;
		padding: 10px;
		background: #ffffff;
		border-radius: 5px;
		border: 1px solid #eee;
	}
	.countCard_text{
		color: #333333;
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 8px;
	}
	.countCard_tab{
		display: flex;
		justify-content: space-between;
	}
	.countCard_tab_content{
		width: 48%;
		height: 60px;
		border: 1px solid #eee;
		border-radius: 5px;
	}
	.countCard_tab_content_top_icon{
		width: 80px;
		height: 20px;
		font-size: 12px;
		text-align: center;
		line-height: 20px;
		border-radius: 4px;
	}
	.countCard_tab_content_text{
		font-size: 18px;
		text-align: center;
		color: #8c8c8c;
		font-weight: 500;
		line-height: 30px;
	}
	.active {
	  border: 1px solid #3498db;
	  box-shadow: 0 0 10px rgba(52, 152, 219, 0.2);
	}
	.scollBox{
		width: 100%;
		overflow-y: scroll;
		height: calc( 100vh - 304px );
	}
</style>