moin_app/pages/sub/mechanicalMonitor/mechanicalMonitor.vue

<template>
	<view class="main">
		<view class="searchBox">
			<searchRow placeholder="搜索主机" @searchFn="searchFn"/>
		</view>
		<view class="tabs">
			<myTab :tabList="tabList" @tabClick="tabClick" :current="current"></myTab>
		</view>
		<view class="ul">
			<view class="total" v-if="total">共{{total}}条</view>
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="row">
					<view class="lab">机器名称</view>
					<view class="val">{{item.machineName}}</view>
				</view>
				<view class="row">
					<view class="lab">机器主机</view>
					<view class="val blue">{{item.machineHost}}</view>
				</view>
				<view class="row">
					<view class="lab">插件版本</view>
					<view class="val blue">V{{item.latestVersion}}</view>
				</view>
				<view class="row">
					<view class="lab">安装状态</view>
					<view class="val">
						<view class="flex">
							<view class="flex" v-if="item.status==1">
								<view class="icon">
									<image src="../../../static/images/icon (8).png" mode=""></image>
								</view>
								<view class="val yellow">启动中</view>
							</view>
							<view class="flex" style="margin-left: 36rpx;"  v-if="item.status==1">
								<view class="icon">
									<image src="../../../static/images/icon (11).png" mode=""></image>
								</view>
								<view class="val blue">运行中</view>
							</view>
							<view class="flex" style="margin-left: 36rpx;"  v-if="item.status==3">
								<view class="icon">
									<image src="../../../static/images/icon (12).png" mode=""></image>
								</view>
								<view class="val">未启动</view>
							</view>
						</view>
					</view>
				</view>
				<view class="status_row">
					<view class="blueTxt">监控</view>
					<view class="blueTxt">检测</view>
					<view class="blueTxt">报警配置</view>
					<view class="blueTxt" style="text-align: right;">报警记录</view>
				</view>
			</view>
		</view>
		<nodata v-if="!list.length&&status=='nomore'"></nodata>
	</view>
</template>

<script>
	import { monitorList } from '@/config/api.js'
	export default {
		data() {
			return {
				tabList: [{
					name: '全部',
					id: 0
				}, {
					name: '运行中',
				}, {
					name: '启动中'
				},{
					name: '未启动'
				}, ],
				current: 0,
				total: 1,
				list: [],
				name: '',
				status: ''
			}
		},
		onLoad() {
			this.monitorListFn()
		},
		onPullDownRefresh() {
			this.monitorListFn()
		},
		methods: {
			tabClick(item) {
				console.log('item', item);
				this.current = item.index
				this.monitorListFn()
			},
			async monitorListFn() {
				let status = this.current?this.current:''
				const {data: res} = await monitorList({status, machineName: this.name})
				this.list = res.rows
				this.total = res.total
				if(!res.total) {
					this.status = 'nomore'
				}else {
					this.status = ''
				}
				uni.stopPullDownRefresh()
			},
			searchFn(val) {
				this.name = val
				this.monitorListFn()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 16rpx 30rpx;
		background-color: #fff;
	}

	.tabs {
		background-color: #fff;
		margin-top: 8rpx;
		padding: 16rpx 0;
	}
	
	.ul {
		width: 100%;
		padding: 0 30rpx 40rpx 30rpx;
	  .total {
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
		color: #999;
		text-align: right;
	  }
	
	  .card {
		  padding: 10rpx 28rpx;
		  margin-bottom: 24rpx;
	    .row {
			align-items: center;
			display: flex;
			justify-content: space-between;
			padding: 16rpx 0;
			font-size: 26rpx;
			color: #333;
	      .lab {
	      }
	
	      .val {
			  &.blue {
				  color: $themC;
			  }
			  &.hui {
				  color: #999;
			  }
			  &.yellow {
				  color: #fc7710;
			  }
	      }
		  .flex {
			  display: flex;
			  justify-content: flex-end;
			  .icon {
				  width: 28rpx;
				  height: 30rpx;
				  margin-right: 20rpx;
			  }
		  }
	    }
		.status_row {
			color: $themC;
			font-size: 28rpx;
			font-weight: 600;
			display: flex;
			padding:  20rpx 0;
			.blueTxt {
				flex: 1;
			}
		}
	  }
	}
</style>