jp-floorlock-Inspection/pages/index/index.vue

<template>
	<view>
		<u-navbar v-show="false" title="首页" title-color="#101010"></u-navbar>
		<view class="back-blue">
			<view class="back-color">

			</view>
		</view>
		<view class="main_top">
			<view class="main_top1">
				<view class="logo_img">
					<image class="img" src="@/assets/img/logo/logo.png" mode=""></image>
				</view>
				<view class="logo_text">
					<view class="logo_text1">
						智泊e家

					</view>
					<view class="logo_text2">
						巡检端
					</view>
				</view>
			</view>
			<view class="main_top2">
				<!-- 消息提醒位置 -->
			</view>
		</view>
		<view class="main_navigation panel">
			<view class="item-na" @click="gotoUrl('/pages/task/addTask')">
				<view class="na-img">
					<image class="img" src="@/assets/img/index/na-1.png" mode=""></image>
				</view>
				<view class="na-text">
					故障上报
				</view>
			</view>
			<view class="item-na-b">

			</view>
			<view class="item-na">
				<view class="na-img">
					<image class="img" src="@/assets/img/index/na-2.png" mode=""></image>
				</view>
				<view class="na-text">
					申请管理
				</view>
			</view>
			<view class="item-na-b">

			</view>
			<view class="item-na end">
				<view class="na-img">
					<image class="img" src="@/assets/img/index/na-3.png" mode=""></image>
				</view>
				<view class="na-text">
					团队管理
				</view>
			</view>
		</view>
		<view class="main_statuspanel panel">
			<view class="top-main">
				<view class="title-main">
					地锁状态

				</view>
				<view class="goto-main">
					查看详情
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
			</view>
			<view class="body">
				<view class="pie">
					<view id="body1pie1" class="body1pie">

					</view>
					<view  class="body2pie">
						<view class="v1">{{datafloorStatus.totalNum}}</view>
						<view class="v2">地锁：套</view>
					</view>
				</view>
				<view class="item-list">
					<view class="item-status">
						<view class="num">
							{{datafloorStatus.normalNum}}
						</view>
						<view class="statusN">
							<view class="statusC status1">

							</view>
							<view class="statusT">
								在线
							</view>
						</view>
					</view>
					<view class="item-status">
						<view class="num">
							{{datafloorStatus.errorNum}}
						</view>
						<view class="statusN">
							<view class="statusC status2">

							</view>
							<view class="statusT">
								故障

							</view>
						</view>
					</view>
					<view class="item-status">
						<view class="num">
							{{datafloorStatus.loseNum}}
						</view>
						<view class="statusN">
							<view class="statusC status3">

							</view>
							<view class="statusT">
								离线

							</view>
						</view>
					</view>
					<view class="item-status" >
						<view class="num">
							0
						</view>
						<view class="statusN">
							<view class="statusC status4">

							</view>
							<view class="statusT">
								维护

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main_list1 panel">
			<view class="top-main">
				<view class="title-main">
					故障记录


				</view>
				<view class="goto-main">
					查看详情
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
			</view>
			 
			<view class="list"  >
				<view class="item" 
				 v-for="(item,index) in dataerrList" 
				 @click="gotoUrl('/pages/task/maintenanceTaks?id='+item.id)"
				 :key="index">
					<view class="icon">
						
						<image class="img" v-if="item.errorCodeImage" :src="item.errorCodeImage" mode=""></image>
						
						<image class="img" v-else src="@/assets/img/taskstatus/status3.png" mode=""></image>
					</view>
					<view class="body">
						<view class="line1">
							<view class="title">
								{{item.errorCodeText}}

							</view>
							<view class="status " :class="'status'+item.status">
								{{item.statusN}}

							</view>
						</view>
						
						<view class="line2">
							<view class="value">
								{{item.createTime}}

							</view>
							<view class="value">
								{{item.parkingName}} 

							</view>
						</view>
						<view class="errorDesc" v-if="item.errorDesc">
							描述：{{item.errorDesc}}
							
						</view>

					</view>
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
			
			</view>

		</view>



		<u-divider border-color="#CFD2D5">已经到底了</u-divider>
		
		<tabbar :current="0"></tabbar>
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagejsIndex.js'
	
	import * as echarts from 'echarts';
	import Tabbar from '@/components/Tabbar.vue'


	export default {
		components: {
			Tabbar,
			
		},
		data() {
			return {
				echartsList: {},
				isReadyfloorStatus:false,
				datafloorStatus:{},
				
				isReadyerrList:false,
				dataerrList:[],
			};
		},
		onLoad() {

		},
		onShow() {
			
			if(this.isReadyfloorStatus){
				this.getfloorStatus()
			}
			if(this.isReadyerrList){
				this.geterrList()
			}
			
		},
		onReady() {
			this.geterrList()
			this.getfloorStatus()
			//this.getbody1pie1()
		},
		methods: {
			geterrList(){
				
				API.errList({
					pageIndex:1,
					pageIndex:5,
				}).then((response) => {
					this.dataerrList=response.data.data
					this.isReadyerrList=true
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				
				})
			},
			getfloorStatus(){
				
				API.floorStatus().then((response) => {
					var obj=response.data;
					var sz=['totalNum','normalNum','errorNum','loseNum']
					var bl=false
					for(var i in sz){
						if(obj[sz[i]]!=this.datafloorStatus[sz[i]]){
							bl=true
							this.datafloorStatus=obj
						}
					}
					
					this.isReadyfloorStatus=true
					if(bl){
						this.getbody1pie1()
					}
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				
				})
			},
			getbody1pie1() {
				var key = "body1pie1"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(88 * 2),
						height: uni.upx2px(88 * 2)
					})

				}
				myChart.clear()
				var option = {
				  
					series: [{
						silent: true,
						type: 'pie',
						radius: ['80%', '100%'],
						label: {
							show: false,
						},

						data: [{
								value: this.datafloorStatus.normalNum,
								itemStyle: {
									color: 'rgba(0, 185, 98, 1)'
								}
							},
							{
									value: this.datafloorStatus.loseNum,
									itemStyle: {
										color: 'rgba(153, 153, 153, 1)'
									}
								},
							{
								value: this.datafloorStatus.errorNum,
								itemStyle: {
									color: 'rgba(255, 123, 0, 1)'
								}
							}
						]
					}],
					grid: {
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},

				}
				myChart.setOption(option);
				console.log(option)
				this.echartsList[key] = myChart;
			}
		}
	}
</script>
<style>
	page{
	/* 	background-color: #FFFFFF; */
	}
</style>
<style lang="scss">
	.back-blue {
		height: 0px;

		.back-color {
			height: 656rpx;
			background: linear-gradient(180deg, rgba(22, 119, 255, 1) 53%, rgba(203, 234, 255, 0) 100%);

		}
	}

	.top-main {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title-main {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			font-weight: bold;
		}

		.goto-main {
			color: rgba(131, 131, 131, 1);
			font-size: 24rpx;
		}
	}

	.panel,
	.main_top {
		margin: 0 32rpx;
	}

	.panel {
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 4px 8px 0px rgba(22, 119, 255, 0.1);
	}

	.main_top {
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;

		.main_top1 {
			display: flex;
			align-items: center;

			.logo_img {
				.img {
					border-radius: 8px;
					width: 96rpx;
					height: 96rpx;
				}

				margin-right: 16rpx;
			}

			.logo_text {
				color: #fff;

				.logo_text1 {
					font-size: 20px;
				}

				.logo_text2 {
					font-size: 16px;

				}
			}
		}

		.main_top2 {}
	}

	.main_navigation {
		margin-top: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 24rpx 0 20rpx 0;

		.item-na-b {
			border-left: 1px solid rgba(187, 187, 187, 0.43);
			height: 70rpx;
		}

		.item-na {
			width: 32%;
			text-align: center;

			.na-img {
				display: flex;
				justify-content: center;

				.img {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}

	.main_statuspanel {
		margin-top: 24rpx;
		padding: 24rpx;
		.body2pie{
			    position: relative;
			    top: -140rpx;
			    height: 0px;
			    left: 0px;
				width: 176rpx;
				text-align: center;
				.v1{
					color: rgba(16,16,16,1);
					font-size: 48rpx;
					font-weight: bold;
				}
				.v2{
					color: rgba(119,119,119,1);
					font-size: 24rpx;
				}
		}
		.body {
			display: flex;
			padding: 24rpx;

			.item-list {
				margin-left: 48rpx;
				display: flex;
				width: 100%;
				flex-wrap: wrap;

				.item-status {
					width: 50%;

					.num {
						color: rgba(51, 51, 51, 1);
						font-size: 36rpx;
						font-weight: bold;
					}
				}

				.statusN {
					display: flex;
					align-items: center;

					.statusC {
						margin-right: 8rpx;
						width: 16rpx;
						height: 16rpx;
						background-color: rgba(153, 153, 153, 1);
					}

					.status1 {
						background-color: rgba(0, 185, 98, 1);
					}

					.status2 {
						background-color: rgba(255, 123, 0, 1);
					}

					.status3 {
						background-color: rgba(153, 153, 153, 1);
					}

					.status4 {
						background-color: rgba(129, 97, 255, 1);
					}
				}

			}
		}
	}

	.main_list1 {
		margin-top: 24rpx;
		padding: 24rpx;
		
		.list-body{
			padding: 24rpx 0;
			.item {
				border-bottom: 1px solid rgba(232, 232, 232, 1);
			}
			.title {
				display: flex;
				    justify-content: space-between;
					.name{
						color: rgba(51,51,51,1);
						font-size: 32rpx;
						font-weight: bold;
					}
					.status{
						
					}
					.statusN1{
						
					}
					.statusN2{
						
					}
					.statusN3{
						
					}
			}
			.body{
				    display: flex;
					color: rgba(51,51,51,1);
					font-size: 28rpx;
				.name{
					width: 150rpx;
				}
				.value{
					
				}
			}
		}
		
		
		.list {
			padding: 24rpx 0;

			.item {
				display: flex;
				border-bottom: 1px solid rgba(232, 232, 232, 1);
				padding: 12rpx 0;
				margin: 12rpx 0;

				.img {
					width: 72rpx;
					height: 72rpx;

				}

				.body {
					margin: 0 12rpx;
					width: 100%;

					.line1,
					.line2 {

						display: flex;
						justify-content: space-between;
					}
					.line2 {
						color: rgba(119,119,119,1);
						font-size: 24rpx;
						margin-top: 8rpx;
					}
					.line1 {
						.title {
							color: rgba(51, 51, 51, 1);
							font-size: 28rpx;
							font-weight: bold;
						}

						.status {
							background-color:  rgba(255, 61, 0, 1);
							font-size: 24rpx;
							color:#fff;
							padding: 2rpx 8rpx;
							//border-radius: 4px;

						}
						
						.status0 {
							background-color:  rgba(255, 61, 0, 1);
							
						}
						.status1 {
							background-color:  #007aff;
							
						}

						.status2 {
							background-color:  #ff9900;
							
						}

						.status3 {
							background-color:  #19be6b;
							
						}

						.status4 {
							border: 1px solid rgba(255, 61, 0, 1);
							color: rgba(255, 61, 0, 1);
						}
					}
					
					.errorDesc{
						margin: 8rpx 0;
						 width: 480rpx;
						     color: #777777;
						     font-size: 24rpx;
						 overflow: hidden;
						    text-overflow: ellipsis;
						    white-space: nowrap; /* 禁止换行，强制单行 */
					}
				}
			}

			// .item:not(:last-child) {
			//   border-bottom:1px solid rgba(232,232,232,1);
			// }
		}
	}
</style>