jp-housekeep-manage/pages/mine/myApps.vue

<template>
	<view>
		<u-navbar title="我的应用" title-color="#101010" :is-back="false" ></u-navbar>
		<!-- 用电管理 -->
		<view class="apps-content">
			<view class="title">
				用电管理
			</view>
			<view class="apps-groups">
				<view class="item" @click="gotoUrl('/pages/equipmentDataMonitoring/dataMonitoring-list')"
					>
					<view class="item-icon">
						<image class="img" src="@/assets/img/riLine-file-chart-2-line.svg" mode=""></image>
					</view>
					<view class="item-name">
						设备数据监测
					</view>
				</view>
				
				<view class="item"
					>
					<view class="item-icon item-icon2">
						<image class="img" src="@/assets/img/iconPark-network-tree.svg" mode=""></image>
					</view>
					<view class="item-name">
						设备状态监测
					</view>
				</view>
				
				<view class="item" >
					<view class="item-icon item-icon3">
						<image class="img" src="@/assets/img/iconPark-ranking-list.svg" mode=""></image>
					</view>
					<view class="item-name">
						异常设备排名
					</view>
				</view>
				<view class="item" @click="gotoUrl('/pages/abnormal/abnormalAlarmRecord')"
					>
					<view class="item-icon item-icon4">
						<image class="img" src="@/assets/img/iconPark-caution.svg" mode=""></image>
					</view>
					<view class="item-name">
						异常告警记录
					</view>
				</view>
				<view class="item"
					>
					<view class="item-icon item-icon5">
						<image class="img" src="@/assets/img/iconPark-all-application.svg" mode=""></image>
					</view>
					<view class="item-name">
						设备管理
					</view>
				</view>
				<view class="item" @click="gotoUrl('/pages/equipmentDataMonitoring/equipmentElectricity')"
					>
					<view class="item-icon item-icon6">
						<image class="img" src="@/assets/img/iconPark-order.svg" mode=""></image>
					</view>
					<view class="item-name">
						设备用电量
					</view>
				</view>
				
				
				
			</view>
		</view>
		<!-- 工单管理 -->
		<view class="apps-content" >
			<view class="title">
				工单管理
			</view>
			<view class="apps-groups">
				<view class="item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/riLine-file-list-3-line.svg" mode=""></image>
					</view>
					<view class="item-name">
						工单统计
					</view>
				</view>
				<view class="item">
					<view class="item-icon item-icon7">
						<image class="img" src="@/assets/img/iconPark-edit-one.svg" mode=""></image>
					</view>
					<view class="item-name">
						故障上报
					</view>
				</view>
				
				
				
			</view>
		</view>
		
		<energyCenterTabbar :current="1"></energyCenterTabbar>
	</view>
</template>

<script>
	import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
	import * as API from '@/apis/pagejs/index.js'
	
	export default {
		components: {
			energyCenterTabbar
		},
		data() {
			return {
				codes: '',
				abnormalRecordsList: []
			}
		},
		onReady() {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth()+1 >= 10 ? date.getMonth()+1 : '0'+(date.getMonth()+1);
			this.queryDate = year + '-' + month;
			
			this.getfindByOpenId();
			this.getAbnormalAlarmRecord();
		},
		methods: {
			// 异常告警记录
			getAbnormalAlarmRecord() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.alarmRecord({
					queryDate: this.queryDate,
					configId: '',
					pageIndex: 1,
					pageSize: 3,
					companyId: this.companyId
				}).then((response) => {
					uni.hideLoading();
					this.abnormalRecordsList = response.data.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			// 商户ID
			getfindByOpenId() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					this.codes = response.data.regUser.codes;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.apps-content{
		background-color: #fff;
		margin-bottom: 24rpx;
		.title{
			padding: 32rpx;
			color: rgb(51,51,51);
			font-size: 36rpx;
			font-weight: bold;
			border-bottom: 1px solid #f2f4f6;
		}
		
		.apps-groups{
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 50%;
				display: flex;
				padding: 32rpx 24rpx;
				align-items: center;
				border-right: 1px solid #f2f4f6;
				.item-icon{
					border-radius: 8px;
					background: linear-gradient(180deg, rgba(93,155,255,1) 0%,rgba(0,97,255,1) 100%);
                    width: 72rpx;
					height: 72rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.img{
						width: 48rpx;
						height: 48rpx;
						
					}
				}
				.item-icon2{
                  background: linear-gradient(179.2deg, rgba(168,178,238,1) 6.28%,rgba(123,123,240,1) 96.94%);
				}
				.item-icon3{
					background: linear-gradient(181.79deg, rgba(117,213,224,1) -1.13%,rgba(53,153,203,1) 94.2%);
				}
				.item-icon4{
background: linear-gradient(180.29deg, rgba(255,124,112,1) 0.9%,rgba(255,79,63,1) 100.4%);
				}
				.item-icon5{
background: linear-gradient(180deg, rgba(93,155,255,1) 0%,rgba(0,97,255,1) 100%);
				}
				.item-icon6{
background: linear-gradient(178.44deg, rgba(122,232,227,1) 3.96%,rgba(57,182,182,1) 100.6%);
				}
				.item-icon7{
					background: linear-gradient(180.4deg, rgba(127,213,151,1) 2.1%,rgba(67,176,116,1) 101.21%);
				}
				.item-name{
					color: rgba(51,51,51,1);
					font-size: 36rpx;
					margin-left: 16rpx;
					font-weight: bold;
					
				}
			}
		}
	}

</style>