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" v-if="$has('app:InspectionRecord')">
						<view>
							<!-- <img :src="srcxianshang1" alt="" style="margin-left: 5rpx;"> -->
							<u--image mode="widthFix" :src="srcxianshang1" width="80rpx" height="80rpx"></u--image>
						</view>
						<view style="font-size: 28rpx;color: #697081;">线上报修</view>
					</view>
					<view class="online" @click="Inspectionrecord" v-if="$has('app:OnlineReport')">
						<view>
							<u--image mode="widthFix" :src="srcxianshang2" width="80rpx" height="80rpx"></u--image>

						</view>
						<view style="font-size: 28rpx;color: #697081;">巡检记录</view>
					</view>
					<view class="online" @click="Withholdingrecord" v-if="$has('app:WithholdingRecord')">
						<view>

							<u--image mode="widthFix" :src="srcxianshang3" width="80rpx" height="80rpx"></u--image>
						</view>
						<view style="font-size: 28rpx;color: #697081;">扣缴记录</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- <view class="kongbai">
			
		</view> -->
		<view class="pending"  v-if="$has('app:Tobeassigned')&&$has('app:Toberepaired')&&$has('app:hasrepaired')">
			<view class="pending_middle" >
				<view class="all"   v-if="$has('app:WorkorderTobeDone')">
					<view class="work">
						<span style="font-size: 30rpx;font-weight: bold;">工单待办</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  v-if="$has('app:Tobeassigned')">
						<view style="font-size: 26rpx;color: #697081;">待指派</view>
						<view style="text-align: center;font-size: 32rpx;color: #0C1935;padding-top: 15rpx;">{{workList[1]}}</view>
					</view>
					<view  v-if="$has('app:Toberepaired')">
						<view style="font-size: 26rpx;color: #697081;">待维修</view>
						<view style="text-align: center;font-size: 32rpx;color: #0C1935;padding-top: 15rpx;">{{workList[2]}}</view>
					</view>
					<view  v-if="$has('app:hasrepaired')">
						<view style="font-size: 26rpx;color: #697081;">已维修</view>
						<view style="text-align: center;font-size: 32rpx;color: #0C1935;padding-top: 15rpx;">{{workList[3]}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="equipment" v-if="$has('app:EquipmentException')">
			<view class="pending_middle">
				<view class="all" v-if="$has('app:LookatImmediately')">
					<view class="work">
						<span style="font-size: 30rpx;font-weight: bold;">设备异常</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: 26rpx;color: #697081;">异常总数</view>
						<view style="text-align: center;font-size: 32rpx;color: #FA5555;padding-top: 15rpx;">{{deviceArr.AirConditioner}}</view>
					</view>
					<view>
						<view  style="font-size: 26rpx;color: #697081;">空调异常</view>
						<view style="text-align: center;font-size: 32rpx;color: #FA5555;padding-top: 15rpx;">{{deviceArr.Ammeter}}</view>
					</view>
					<view>
						<view  style="font-size: 26rpx;color: #697081;">水表异常</view>
						<view style="text-align: center;font-size: 32rpx;color: #FA5555;padding-top: 15rpx;">{{deviceArr.WaterMeter}}</view>
					</view>
					<view>
						<view  style="font-size: 26rpx;color: #697081;">电表异常</view>
						<view style="text-align: center;font-size: 32rpx;color: #FA5555;padding-top: 15rpx;">{{deviceArr.Relay}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="arrears" v-if="$has('app:ArrearstobeCollected')">
			<view class="pending_middle">
				<view class="all"  v-if="$has('app:ImmediateCollection')">
					<view class="work">
						<span style="font-size: 30rpx;font-weight: bold;">欠费待收</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 {
				srcxianshang1: require('@/static/index/repair-online.svg'),
				srcxianshang2: require('@/static/index/check-review.svg'),
				srcxianshang3: require('@/static/index/reduce-record.svg'),
				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;
	}

	.online {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.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;
		
	}
.kongbai{
			height: 100rpx;
			width: 750rpx;
		}
	.Homepage_suspension {
		width: 690rpx;
		height: 200rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: 100rpx;
		border-radius: 10rpx;
	}

	.Suspension {
		width: 690rpx;
		// 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: 690rpx;
		// 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: 690rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-around;
		padding-top: 30rpx;
		text-align: center;
		height: 140rpx;
		margin-top: 10rpx;
		border-radius: 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>