wit-uniapp/pages/index/index.vue

<template>
	<view class="content">
<view class="topnames" >
			首页
		</view>
		<!--<view class="Homepage_header">-->

		<!--</view>-->

		<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>
						<!-- <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: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 style="font-size: 30rpx;font-weight: bold;">实时巡检</span>
					</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: 26rpx;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: 26rpx;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 style="font-size: 30rpx;font-weight: bold;">工单待办</span>
					</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: 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">
					<view class="work">
						<span style="font-size: 30rpx;font-weight: bold;">设备异常</span>
					</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: 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">
					<view class="work">
						<span style="font-size: 30rpx;font-weight: bold;">欠费待收</span>
					</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>


				<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 style="font-size: 30rpx;font-weight: bold;">账单待缴</span>
					</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>
				<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.currentAmount }}</t-td>
						<t-td>{{ item.cumulativeAmount }}</t-td>
					</t-tr>
				</t-table>
			</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'
	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 {
		  mixins: [watermark],
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				 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() {
				            this.initWatermark(); // 可以在水印内容准备好后执行初始化
				        },
		onPullDownRefresh() {
			//	console.log('我下拉刷新页面了！！！！！！！！！！！！！！！', )
			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() //刷新数据之后停止刷新效果
						//console.log('111111111111111111', res.data.data)
						this.workList = res.data.data.workOrder;
						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() {
				// console.log('111111111111111111',this.getuserInfo)
				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">
	* {
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
	}
 .watermarkCans {
	        width: 250rpx;
	        height: 250rpx;
	        position: absolute;
	        z-index: -1;
	    }
	// .u-tabbar__content{
	// 	.u-tabbar-item__icon{
	// 		.u-tabbar-item__icon{
	// 			font-size: 19px!important;
	// 		}		
	// 	}
	// }
	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.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: 0 auto;
		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;
	}

	.pending1 {
		width: 750rpx;
		height: 220rpx;
		// background-color: #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 120rpx;
	}

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

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

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


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