IOT/SourceCode/ui/fbs-ui_app2/pages/home/components/clean.vue

<template>
	<view class="container">
		<view class="clean-box over" v-if="overdueList.length">
			<view class="box-header">
				<view class="box-title">逾期未清洗</view>
				<view class="box-tool">
					<text class="num">{{ overdueList.length }}</text>
				</view>
			</view>
			<view class="box-body">
				<div class="list">
					<div class="item" v-for="(item, index) in overdueList" :key="index">{{ item }}</div>
				</div>
			</view>
		</view>
		<view class="clean-box week" v-if="weekCleanList.length">
			<view class="box-header">
				<view class="box-title">一周待清洗</view>
				<view class="box-tool">
					共
					<text class="num">{{ weekCleanList.length }}</text>
					家
				</view>
			</view>
			<view class="box-body">
				<div class="list">
					<div class="item" v-for="(item, index) in weekCleanList" :key="index">{{ item }}</div>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
import api from "@/common/api.js";
import { log } from "@/utils/base.js";
export default {
	data() {
		return {
			overdueList: [],
			weekCleanList: [],
		};
	},
	mounted() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			api.getCleanCompany().then(({ data }) => {
				//data.overdue_companyList.push(...["1", "2", "33", "1", "2", "33", "1", "2", "33", "1", "2", "33"]);
				//data.week_clean_companyList.push(...["1", "2", "33", "1", "2", "33", "1", "2", "33", "1", "2", "33"]);
				this.overdueList = data.overdue_companyList;
				this.weekCleanList = data.week_clean_companyList;
			});
		},
	},
};
</script>

<style lang="scss">
.container {
	padding: 0px 15px;
	font-size: 14px;
	line-height: 24px;
}
.clean-box {
	display: flex;
	flex-direction: column;
	border: 1px solid $uni-color-error;
	border-radius: 5px;
	margin: 10px 0;

	.box-header {
		height: 40px;
		display: flex;
		padding: 0 10px;
		justify-content: space-between;
		align-items: center;
		background-color: $uni-color-error;
		color: $uni-text-color-inverse;
		.num {
			margin: 0 3px;
			font-weight: 600;
		}
	}

	.box-body {
		width: 100%;
		max-height: 200px;
		overflow-y: scroll;
	}
	.list {
		.item {
			height: 35px;
			line-height: 35px;
			color: $uni-color-error;
			border-top: 1px solid $uni-color-error;
			font-size: 14px;
			font-weight: 600;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;

			&:nth-of-type(2n + 1) {
				background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
			}
		}
	}
	&.week {
		border-color: $uni-color-warning;
		.box-header {
			background-color: $uni-color-warning;
		}
		.list {
			.item {
				color: $uni-color-warning;
				border-bottom: 1px solid $uni-color-warning;
			}
		}
	}
}

.charts-box {
	width: 100%;
	height: 300px;
}
</style>