wit-uniapp/pages/index/index.vue

<template>
	<view class="content">
		<view class="Homepage_header">
			<view class="Homepage_suspension">
				<view class="Suspension">
					<view class="online" @click="Onlinewarranty">
						<view><img src="@/static/index/repair-online.svg" alt="" style="margin-left: 5rpx;"></view>
						<view style="font-size: 20rpx;">线上报修</view>
					</view>
					<view class="record" @click="Inspectionrecord">
						<view><img src="@/static/index/check-review.svg" alt="" style="margin-left: 5rpx;"></view>
						<view style="font-size: 20rpx;">巡检记录</view>
					</view>
					<view class="withholding" @click="Withholdingrecord">
						<view><img src="@/static/index/reduce-record.svg" alt="" style="margin-left: 5rpx;"></view>
						<view style="font-size: 20rpx;">扣缴记录</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pending">
			<view class="pending_middle">
				<view class="all">
					<view class="work">
						<span style="font-size: 30rpx;">工单待办</span>
					</view>
					<view class="processing">
						<view class="immediately" @click="Workordertodone">
							<span style="font-size: 25rpx; color: #5c8fff; ">立即处理</span>
							<u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
						</view>

					</view>
				</view>
				<view class="wait">
					<view>
						<view style="font-size: 30rpx;">待指派</view>
						<view style="text-align: center;">{{workList[1]}}</view>
					</view>
					<view>
						<view style="font-size: 30rpx;">待维修</view>
						<view style="text-align: center;">{{workList[2]}}</view>
					</view>
					<view>
						<view style="font-size: 30rpx;">已维修</view>
						<view style="text-align: center;">{{workList[3]}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="equipment">
			<view class="pending_middle">
				<view class="all">
					<view class="work">
						<span style="font-size: 30rpx;">设备异常</span>
					</view>
					<view class="processing">
						<view class="immediately">
							<span style="font-size: 25rpx; color: #5c8fff; ">立即查看</span>
							<u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
						</view>

					</view>
				</view>
				<view class="wait">
					<view>
						<view style="font-size: 30rpx;">异常总数</view>
						<view style="text-align: center;">{{deviceArr.AirConditioner}}</view>
					</view>
					<view>
						<view style="font-size: 30rpx;">空调异常</view>
						<view style="text-align: center;">{{deviceArr.Ammeter}}</view>
					</view>
					<view>
						<view style="font-size: 30rpx;">水表异常</view>
						<view style="text-align: center;">{{deviceArr.WaterMeter}}</view>
					</view>
					<view>
						<view style="font-size: 30rpx;">电表异常</view>
						<view style="text-align: center;">{{deviceArr.Relay}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="arrears">
			<view class="pending_middle">
				<view class="all">
					<view class="work">
						<span style="font-size: 30rpx;">欠费待收</span>
					</view>
					<view class="processing">
						<view class="immediately" @click="Immediatecollection">
							<span style="font-size: 25rpx; color: #5c8fff; ">立即催收</span>
							<u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
						</view>
					</view>
				</view>


				<t-table style="background-color: #fff;margin-top: 10rpx;">
					<t-tr>
						<t-th>欠费类型</t-th>
						<t-th>欠费租户数</t-th>
						<t-th>累计欠费(元)</t-th>
					</t-tr>
					<t-tr v-for="item in tableList" :key="item.name">
						<t-td>{{ item.name }}</t-td>
						<t-td>{{ item.tenant }}</t-td>
						<t-td>{{ item.arrears }}</t-td>


					</t-tr>
				</t-table>
			</view>
		</view>
	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				tableList: [
				],
				tabbardata: 0,
				workList: {}, //工单代办
				deviceArr: {}, //设备异常数据
			

			}
		},
		onLoad() {

			this.getalldata();
		},
		methods: {
			getalldata() {
				this.$api.get('/home/homedata', {})
					.then(res => {
						//console.log('111111111111111111', res.data.data)
						this.workList = res.data.data.workOrder;
						this.deviceArr = res.data.data.equip.maps;

					this.tableList=	res.data.data.billPaymentList.map(item => {
							let json = {};
							if(item.payType=='Water'){
								item.payType='水费'
							}else if(item.payType=='Elec'){
								item.payType='电费'
							}else if(item.payType=='PropertyFee'){
								item.payType='物业费'
							}
							
							json.name = item.payType;
							json.tenant = item.arrearageNum ;
							json.arrears = item.arrearageAmount ;
							return json
						})
 




					})

			},
			Immediatecollection() {
				uni.navigateTo({
					url: '/pages/index/Immediatecollection/Immediatecollection'
				})
			},
			Workordertodone() {
				uni.navigateTo({
					url: '/pages/index/Workordertodone/Workordertodone'
				})
			},
			Onlinewarranty() {
				uni.navigateTo({
					url: '/pages/index/Onlinewarranty/Onlinewarranty'
				})
			},
			Inspectionrecord() {
				uni.navigateTo({
					url: '/pages/index/Inspectionrecord/Inspectionrecord'
				})
			},
			Withholdingrecord() {
				uni.navigateTo({
					url: '/pages/index/Withholdingrecord/Withholdingrecord'
				})
			},



		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
	}

	.Homepage_header {
		width: 750rpx;
		height: 200rpx;
		background-color: #5c8fff;
		border-radius: 0px 0px 16px 16px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Homepage_suspension {
		width: 650rpx;
		height: 200rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: 100rpx;
	}

	.Suspension {
		width: 650rpx;
		// height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.pending {
		width: 750rpx;
		height: 350rpx;
		// background-color: #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		top: 50rpx;
	}

	.pending_middle {
		width: 650rpx;
		// height: 100px;
		// background-color: #fff;
	}

	.all {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.work {
		// padding-left: 20rpx;
		// padding-top: 2rpx;
	}

	.wait {
		width: 650rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-around;
		padding-top: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-top: 10rpx;
	}

	.immediately {
		display: flex;
		// padding-top: 2rpx;
	}

	.equipment {
		width: 750rpx;
		// height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		top: 20rpx;
	}

	.arrears {
		// width: 750rpx;
		// height: 350rpx;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		position: relative;
		top: 50rpx;
	}

	.type {
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		flex: 1;
		margin-top: 10rpx;
		font-size: 30rpx;
	}

	tr {
		background-color: #fff;
	}
</style>