OpenDoorManageMini/pages/globalPages/components/equipment.vue

<template>
	<view class="container">
		<u-navbar bgColor="#2C6FF3" :placeholder="true" :autoBack="false">
			<view slot="left" style="color:#fff;font-size: 36rpx;">
				设备管理
			</view>
		</u-navbar>
		<view class="total">
			<view class="total-item">
				<view class="num">
					{{totalData.onlineNum}}/{{totalData.offlineNum}}
				</view>
				<view class="name">
					在线/离线
				</view>
			</view>
			<view class="total-item">
				<view class="num">
					{{totalData.operatingNum}}/{{totalData.closedNum}}
				</view>
				<view class="name">
					运营/停业
				</view>
			</view>
			<view class="total-item" @click="$tab.navigateTo('/pages/replenish/replenishmentManagement')">
				<view class="num">
					{{totalData.needToFillNum}}
				</view>
				<view class="name">
					待补货
				</view>
			</view>
		</view>
		<view class="search">
			<!-- <u-search animation placeholder="请输入设备名称/编号搜索" :showAction="false"
				disabled @click.native="$tab.navigateTo('/pages/equipment/search')">
			</u-search> -->
			<u-search animation placeholder="请输入设备名称/编号搜索" :showAction="false"
				 @change="search">
			</u-search>
		</view>
		<view class="content">
			<view class="xy-card" v-for="(item,index) in list" :key="item.placeLineId">
				<view class="eq-line-title">
					{{item.placeLineName}}({{item.deviceNum}}台)
					<view class="arrow-right">
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
				</view>
				<view class="eq-item" @click="$tab.navigateTo(`/pages/equipment/detail?id=${item1.deviceId}`)"
					v-for="(item1,index1) in item.deviceInfos" :key="item1.deviceId">
					<view class="eq-content">
						<view class="eq-wrap">
							<view class="eq-name flex justify-between">
								<view class="eq-title" v-if="item1.deviceName">{{item1.deviceName}}<text style="color: #666;">({{item1.deviceId}})</text></view>
								<view class="eq-title" v-else>{{item1.deviceId}}</view>
								<view class="eq-status-box flex align-center">
									<view class="eq-status" :class="[item1.netState==1?'online':'']"><text></text>{{item1.netStateName}}
									</view>
									<view class="eq-status" :class="[item1.busyState==1?'online':'']"><text></text>{{item1.busyStateName}}
									</view>
								</view>
							</view>
							<view class="eqeq-type">
								<view>
									设备类型：
								</view>
								<view>
									{{item1.deviceTypeName}}
								</view>
							</view>
							<view class="eqeq-type">
								<view>
									资产编号：
								</view>
								<view>
									{{item1.mercDeviceCode||'无'}}
								</view>
							</view>
							<view class="eqeq-type">
								<view>
									今日交易笔数：
								</view>
								<view>
									{{item1.dayOrderNum}}
								</view>
							</view>
							<view class="eqeq-type">
								<view>
									今日销售额：
								</view>
								<view>
									￥{{$xy.delMoney(item1.daySalesPrice)}}
								</view>
							</view>
						</view>

						<view class="status">
							<view class="s-name">
								在售/补货
							</view>
							<view class="s-num">
								{{item1.onSaleNum||0}}/{{item1.fillNum||0}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="more" @click="$tab.navigateTo('/pages/equipment/search')">
					查看全部
				</view> -->
			</view>

			<view class="empty" v-if="list.length==0">
				<u-empty></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mercHomeList,
		mercHomeStatistical,
	} from "@/api/device/device.js"
	export default {
		components: {},
		data() {
			return {
				online: true,
				list: [],
				totalData: {
					closedNum: 0,
					needToFillNum: 0,
					offlineNum: 0,
					onlineNum: 0,
					operatingNum: 0,
					keyWords:''
				},
			}
		},

		created() {
			this.getTotalData('')
			this.getList('')
		},

		methods: {
			onshow(){
				this.getList('')
			},
			
			search(e) {
				console.log(e)
				this.keyWords=e
				this.getTotalData(this.keyWords)
				this.getList(this.keyWords)
			},

			getTotalData(deviceId) {
				mercHomeStatistical({
					deviceName: '',
					deviceId: deviceId
				}).then(res => {
					this.totalData = res.data;
				})
			},

			getList(deviceId) {
				mercHomeList({
					deviceName: '',
					deviceId: deviceId
				}).then(res => {
					this.list = res.data;
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		.nav-style {
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
		}

		.search {
			padding: 24rpx 24rpx;
			background-color: #fff;
		}

		.total {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			color: #fff;
			background-color: #2C6FF3;
			padding: 40rpx 24rpx ;

			.total-item {
				.num {
					font-weight: bold;
					font-size: 52rpx;
				}

				.name {
					font-size: 26rpx;
				}
			}
		}

		.content {
			padding: 24rpx;
			padding-bottom:calc(124rpx + env(safe-area-inset-bottom) / 2);

			.xy-card {
				margin-bottom: 24rpx;
			}

			.eq-line-title {
				font-size: 32rpx;
				padding-bottom: 24rpx;
				position: relative;

				.arrow-right {
					position: absolute;
					right: 0;
					top: 0;
				}
			}

			.eq-item {
				position: relative;

				&+.eq-item {
					padding-top: 12rpx;
				}

				.eq-content {

					.eq-wrap {
						border-radius: 8rpx;
						background-color: rgb(245, 248, 251);
						box-sizing: border-box;
						padding: 24rpx 12rpx;
						font-size: 26rpx;

						.eq-name {
							font-size: 32rpx;
							font-weight: bold;
							margin-bottom: 24rpx;
							position: relative;
							
							>.eq-title{
								width: 420rpx;
								>text{
									font-size: 30rpx;
									color: #666;
									font-weight: normal;
								}
							}
							
							.eq-status-box{
								float: right;
								position: absolute;
								right:0;
								top:0;
							}

							.eq-status {
								font-size: 28rpx;
								color: #666;
								font-weight: normal;
								margin-left: 12rpx;

								>text {
									display: inline-block;
									background-color: #666;
									width: 16rpx;
									height: 16rpx;
									border-radius: 16rpx;
									margin-right: 12rpx;

								}

								&.online {
									color: #f56c6c;

									>text {
										background-color: green;
									}
								}
							}
						}
					}

					.eqeq-type {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 28rpx;

						>view:nth-child(1) {
							color: #000;
							width: 200rpx;
						}

						>view:nth-child(2) {
							color: #666;
							padding-left: 6rpx;
						}
					}
					
					.eqeq-type+.eqeq-type{
						margin-top: 16rpx;
					}

					.status {
						width: 130rpx;
						height: 120rpx;
						box-sizing: border-box;
						border-radius: 120rpx;
						// border: 6rpx solid #2C6FF3;
						text-align: center;
						display: flex;
						flex-flow: column;
						justify-content: space-around;
						align-items: center;
						position: absolute;
						right: 12rpx;
						bottom: 24rpx;

						.s-name {
							font-size: 28rpx;
							padding-top: 20rpx;
							font-weight: bold;
						}

						.s-num {
							font-size: 32rpx;
							padding-bottom: 20rpx;
						}
					}
				}
			}

			.more {
				text-align: center;
				font-size: 28rpx;
				color: #2C6FF3;
				line-height: 80rpx;
			}
		}

		.empty {
			margin: 40% auto 0;
		}
	}
</style>