wit-uniapp/pages/index/index.vue

<template>
	<view class="content">
		<u-cell-group class="toptemplate">
			<view style="height: 20px;"></view>
			<u-cell title="电商园四期—B座" :border="false">
				<u-icon slot="icon" size="40" color="#fff" name="map"></u-icon>
				<u-icon slot="right-icon" size="40" color="#fff" name="account"></u-icon>
			</u-cell>
		</u-cell-group>
		<view class="Homepage_suspension"
			v-if="$has('app:InspectionRecord')||$has('app:OnlineReport')||$has('app:WithholdingRecord')">
			<view class="Suspension">
				<view class="online" @click="Onlinewarranty" v-if="$has('app:OnlineReport')">
					<view>
						<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:InspectionRecord')">
					<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 class="pending" v-if="$has('app:RealtimeInspection')">
			<view class="pending_middle">
				<view class="all">
					<view class="work">
						<span>实时巡检</span>
						<text class="bootomBg"></text>
					</view>
					<view class="processing" v-if="$has('app:ImmediateInspection')">
						<view class="immediately" @click="Immediateinspection">
							<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: 24rpx;color: #697081;">今日待巡检</view>
						<view style="text-align: center;font-size: 32rpx;color: #0C1935;padding-top: 15rpx;">
							{{inspectionInfoList.todayTotalNum}}
						</view>
					</view>
					<view>
						<view style="font-size: 24rpx;color: #697081;">今日已巡检</view>
						<view style="text-align: center;font-size: 32rpx;color: #0C1935;padding-top: 15rpx;">
							{{inspectionInfoList.todayNum}}
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="pending" v-if="$has('app:Tobeassigned')||$has('app:Toberepaired')||$has('app:hasrepaired')">
			<view class="pending_middle">
				<view class="all">
					<view class="work">
						<span>工单待办</span>
						<text class="bootomBg"></text>
					</view>
					<view class="processing" v-if="$has('app:WorkorderTobeDone')">
						<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: 24rpx;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: 24rpx;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: 24rpx;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">
					<view class="work">
						<span>设备异常</span>
						<text class="bootomBg"></text>
					</view>
					<view class="processing" v-if="$has('app:LookatImmediately')">
						<view class="immediately" @click="EquipmentException">
							<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: 24rpx;color: #697081;">异常总数</view>
						<view style="text-align: center;font-size: 32rpx;color: #FA5555;padding-top: 15rpx;">
							{{abnormalNum}}
						</view>
					</view>
					<view>
						<view style="font-size: 24rpx;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: 24rpx;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: 24rpx;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">
					<view class="work">
						<span>欠费待收</span>
						<text class="bootomBg"></text>
					</view>
					<view class="processing" v-if="$has('app:ImmediateCollection')">
						<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>
				<view class="tableBox">
				<u-row class="table">
					<u-col span="4">
						<text>欠费类型</text>
					</u-col>
					<u-col span="4">
						<text>欠费租户数</text>
					</u-col>
					<u-col span="4">
						<text>累计欠费(元)</text>
					</u-col>
				</u-row>
				<u-row v-for="item in tableList" :key="item.name" class="table t1">
					<u-col span="4">
						<text>{{item.name}}</text>
					</u-col>
					<u-col span="4">
						<text>{{item.tenant}}</text>
					</u-col>
					<u-col span="4">
						<text>{{item.tenant}}</text>
					</u-col>
				</u-row>
			</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 class="arrears1" v-if="$has('app:BillPending')">
			<view class="pending_middle">
				<view class="all">
					<view class="work">
						<span>账单待缴</span>
						<text class="bootomBg"></text>
					</view>
					<view class="processing" v-if="$has('app:ImmediatePayment')">
						<view class="immediately" @click="BillPending">
							<span style="font-size: 25rpx; color: #5c8fff; ">立即缴费</span>
							<u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
						</view>
					</view>
				</view>
				<view class="tableBox">
					<u-row class="table">
						<u-col span="4">
							<text>欠费类型</text>
						</u-col>
						<u-col span="4">
							<text>本期待缴金额(元)</text>
						</u-col>
						<u-col span="4">
							<text>累计待缴金额(元)</text>
						</u-col>
					</u-row>
					<u-row v-for="item in tableList" :key="item.name" class="table t1">
						<u-col span="4">
							<text>{{item.name}}</text>
						</u-col>
						<u-col span="4">
							<text>{{item.currentAmount}}</text>
						</u-col>
						<u-col span="4">
							<text>{{item.cumulativeAmount}}</text>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>

		<u-tabbar class="tabberall" :value="value1" :fixed="true" :placeholder="true" @change="name => value1 = name"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" @click="click1">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="tabimg1"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="tabimg2"></image>
			</u-tabbar-item>

			<u-tabbar-item v-if="$has('app:worktable')" text="工作台" @click="click2">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="tabimg3"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="tabimg4"></image>

			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="click3">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="tabimg5"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="tabimg6"></image>

			</u-tabbar-item>
		</u-tabbar>

		<!-- 水印 -->
		<!-- <canvas v-if="showCanvas" class="watermarkCans" canvas-id="watermarkCanvas"></canvas> -->
	</view>
</template>

<script>
	import watermark from '@/js_sdk/ly-watermark/commons/watermark.js'
	export default {
		//  mixins: [watermark],  // 水印
		components: {
		},
		data() {
			return {
				abnormalNum: 0,
				canvasText: '',
				value1: 0,
				tabimg1: require('@/static/tab/h2.png'),
				tabimg2: require('@/static/tab/h1.png'),
				tabimg3: require('@/static/tab/w2.png'),
				tabimg4: require('@/static/tab/w1.png'),
				tabimg5: require('@/static/tab/y2.png'),
				tabimg6: require('@/static/tab/y1.png'),


				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: {}, //设备异常数据
				getuserInfo: {},
				inspectionInfoList: {},
			}
		},
		onLoad() {
			this.getalldata();
			this.getuserInfo = uni.getStorageSync('getuserInfo');
			this.canvasText = this.getuserInfo.realName;

		},
		mounted() {
		},
		onPullDownRefresh() {
			this.getalldata();

		},
		methods: {
			click1() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			click2() {
				uni.navigateTo({
					url: '/pages/Workorder/Workorder'
				})
			},
			click3() {
				uni.navigateTo({
					url: '/pages/my/my'
				})
			},

			getalldata() {
				this.$api.get('/home/homedata', {})
					.then(res => {
						uni.stopPullDownRefresh() //刷新数据之后停止刷新效果
						this.workList = res.data.data.workOrder;
						this.abnormalNum = res.data.data.equip.abnormalNum;
						this.deviceArr = res.data.data.equip.maps;
						this.inspectionInfoList = res.data.data.inspectionInfo;

						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;

							json.currentAmount = item.currentAmount;
							json.cumulativeAmount = item.cumulativeAmount;
							return json
						})
					})
			},
			BillPending() {
				uni.navigateTo({
					url: '/pages/index/BillPending/BillPending?info=' + encodeURIComponent(JSON.stringify(this
						.getuserInfo))
				});
			},
			Immediatecollection() {
				uni.navigateTo({
					url: '/pages/index/Immediatecollection/Immediatecollection'
				})
			},
			Workordertodone() {
				uni.navigateTo({
					url: '/pages/index/Workordertodone/Workordertodone'
				})
			},
			EquipmentException() {
				uni.navigateTo({
					url: '/pages/index/EquipmentException/EquipmentException'
				})
			},
			Onlinewarranty() {
				uni.navigateTo({
					url: '/pages/index/Onlinewarranty/Onlinewarranty'
				})
			},
			Immediateinspection() {
				uni.navigateTo({
					url: '/pages/index/Immediateinspection/Immediateinspection'
				})
			},
			Inspectionrecord() {
				uni.navigateTo({
					url: '/pages/index/Inspectionrecord/Inspectionrecord'
				})
			},
			Withholdingrecord() {
				uni.navigateTo({
					url: '/pages/index/Withholdingrecord/Withholdingrecord'
				})
			},
		}
	}
</script>

<style lang="scss">
	.toptemplate {
		height: 280rpx;
		border-radius: 0 0 32rpx 32rpx;
	}

	* {
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
	}

	.watermarkCans {
		width: 250rpx;
		height: 250rpx;
		position: absolute;
		z-index: -1;
	}

	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.work {
		position: relative;
		margin-bottom: 20rpx;

		span {
			font-size: 28rpx;
			position: relative;
			z-index: 2;
		}

		.bootomBg {
			display: inline-block;
			background: linear-gradient(to right, #FFD263, #ffffff);
			height: 8px;
			width: 56px;
			position: absolute;
			left: 0;
			bottom: -4px;
			border-radius: 5px;
			z-index: 0;
		}
	}

	.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: fixed;
		top: 0px;

	}

	.kongbai {
		height: 100rpx;
		width: 750rpx;
	}

	.Homepage_suspension {
		width: 690rpx;
		height: 200rpx;
		margin: -120rpx auto 28rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 10rpx;
	}

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

	.pending {
		width: 750rpx;
		// background-color: #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-bottom: 28rpx;
	}

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

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

	.wait {
		width: 690rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-around;
		text-align: center;
		height: 150rpx;
		border-radius: 10rpx;
	}

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

	.equipment {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-bottom: 28rpx;
	}

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

	.arrears1 {
		// width: 750rpx;
		// height: 350rpx;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-bottom: 28rpx;
	}


	.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;
	}

	.tabberall {
		position: relative;
		z-index: 3;
	}
	.tableBox{
		padding:0 32rpx 20rpx 32rpx;
		background-color: #fff;
		border-radius: 8rpx;
		.table{
			height: 80rpx;
			&.t1{
				border-top:1px solid #eee;
				height:90rpx
			}
			*{text-align: center;}
		}
	}
	
</style>