jp-youdian-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">
						优电联盟

					</view>
					<view class="logo_text2">
						巡检端
					</view>
				</view>
			</view>
			<view class="main_top2">
				<!-- 消息提醒位置 -->
			</view>
		</view>
		<view class="main_navigation panel">
			<view class="item-na end" @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" v-if="isAdmin">

			</view>
			<view class="item-na end" @click="gotoUrl('/pages/team/teamList')" v-if="isAdmin">
				<view class="na-img">
					<image class="img" src="@/assets/img/index/na-3.png" mode=""></image>
				</view>
				<view class="na-text">
					团队管理
				</view>
			</view>

			<view class="item-na-b">

			</view>

			<view class="item-na end" @click="gotoUrl('/pages/inspection/list')">
				<view class="na-img">
					<image class="img" src="@/assets/img/index/na-2.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" @click="gotoUrl('/pages/station/stationList')">
					查看详情
					<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" v-if="datafloorStatus.gunNum">
						<view class="v1">{{datafloorStatus.gunNum}}</view>
						<view class="v2">单位：把</view>
					</view>
				</view>
				<view class="item-list">
					<view class="item-status">
						<view class="num">
							{{datafloorStatus.gunWorkNum}}
						</view>
						<view class="statusN">
							<view class="statusC status1">

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

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

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

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

							</view>
							<view class="statusT">
								空闲

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

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

							</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" @click="gotoUrl('/pages/task/listTask')">
					全部故障记录

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

			<view class="top-main">
				<u-tabs :list="tabslist"  :current="current1" @change="change1"></u-tabs>

			</view>

			<view class="list">
				<view class="item" v-for="(item,index) in dataerrList[current1]"
					@click="gotoUrl('/pages/task/maintenanceTaks?id='+item.id)" :key="index">

					<view class="body">
						<view class="line1">

							<view class="title">


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

							</view>


						</view>
						<view class="line2">
							<view v-if="item.type==1" >
								{{item.deviceName}} {{item.deviceNo}}
							</view>
							<view v-if="item.type==2" >
								人工上报
							</view>
						
							<view class="value" style=" white-space: pre;">
						
								{{item.errorReportTime}}
							</view>
						
						</view>
						<view class="line2" v-if="item.type==1">
							<view v-if="getHourDistanceArr(item.errorReportTime)==0" :class="{
								getHourDistanceArrNum10:true,
							
							}">
								
							</view>
							<view v-else :class="{
								getHourDistanceArrNum10:true,
								getHourDistanceArrNum12:getHourDistanceArr(item.errorReportTime)>12,
								getHourDistanceArrNum24:getHourDistanceArr(item.errorReportTime)>24,
							}">
								{{getHourDistanceArr(item.errorReportTime) }}小时未处理</view>

						

						</view>



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

				<u-divider color="#F44336"  :nonetop="0" :isnone="dataerrList[current1].length==0" nonetext="暂无数据"
					v-if="dataerrList[current1].length==0"></u-divider>




			</view>

		</view>

		<view class="main_list1 panel ">
			<view class="top-main">
				<view class="title-main">
					未巡检记录
					

				</view>
				<view class="goto-main" @click="gotoUrl('/pages/inspection/list')">
					全部巡检记录
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
			</view>

			<view class="top-main">
				<u-tabs :list="tabslist2"  :current="current2" @change="change2"></u-tabs>

			</view>

			<view class="list-body">
				<view class="item" v-for="(item,index) in datainsList[current2]"
					@click="gotoUrl('/pages/inspection/add?back=1&stationId='+item.stationId)" :key="index">


					<view class="line1">

						<view class="title">


							{{item.stationName}}
						</view>
						<view class="value" v-if="0">
							上次巡检时间：{{lastChargeTime(item.lastInspectionTime)}}

						</view>
						<view class="value">
							巡检截止时间：{{lastChargeTime(item.inspectionEndTime)}}
						
						</view>


					</view>



					<view class="line2">
						
						<view   v-if="getdaysDistance(item.inspectionEndTime)=='-'"
						
						 style="color:#777777 ;" >
						
							未初始化
						
						</view>
						
						<view   v-else-if="getdaysDistance(item.inspectionEndTime)>0"
						 style="color:#FF7B00 ;" >

							{{getdaysDistance(item.inspectionEndTime)}}天后到期

						</view>
						<view   class="value" v-else-if="getdaysDistance(item.inspectionEndTime)==0"  style="color: #EE3138 ;" >
						
							&le;1天后到期
						
						
						</view>
						<view   v-else  style="color: #EE3138 ;" >
						
							已逾期

						
						</view>

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

					</view>




				</view>

				<u-divider color="#F44336" :nonetop="0" :isnone="datainsList[current2].length==0" nonetext="暂无数据"
					v-if="datainsList[current2].length==0"></u-divider>




			</view>

		</view>





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

	import {

		newDate,
		hourDistanceArr,
		daysDistanceTrue
	} from '@/apis/utils'
	export default {
		components: {
			Tabbar,

		},
		data() {
			return {
				echartsList: {},
				isReadyfloorStatus: false,
				datafloorStatus: {},
				roleList: [],
				isReadyerrList: false,
				isReadyinsList: false,
				dataerrList: [
					[],[]
				],
				dataerrRecordsTotal: 0,

				datainsList: [
						[],[]
				],
				datainsRecordsTotal: 0,

				tabslist: [{
					name: '电动车充电站',
					code: "1"

				}, {
					name: '电单车充电站',
					code: "0"
				}],
				tabslist2: [{
					name: '电动车充电站',
					code: "1"
				
				}, {
					name: '电单车充电站',
					code: "0"
				}],
				current1: 0,
				current2: 0,
			};
		},
		onLoad() {
			//	this.roleList=
		},
		onShow() {
			//	this.roleList=this.jphelp.getPersonInfoPlus().roleList
			if (this.isReadyfloorStatus) {
				this.getfloorStatus()
			}
			if (this.isReadyerrList) {
				this.geterrList()
			}

			if (this.isReadyinsList) {
				this.getinsList()
			}
		},
		computed: {
			isAdmin() {
				console.log(this.jphelp.getPersonInfo().role)
				if (this.jphelp.getPersonInfo().role.indexOf( '1')!=-1) {
					return true
				}
				return false
			}
		},
		onReady() {
			this.geterrList()
			this.getfloorStatus()
			this.getinsList()
			//this.getbody1pie1()
			this.query()
		},
		methods: {
			lastChargeTime(time) {
				if (time) {
					return time.split(" ")[0]
				} else {
					return ''
				}
			},
			getinsList() {
				
				API.recordList({
					pageIndex: 1,
					pageSize: 20,
					status: 0,
					chargingType:"1"
				}).then((response) => {
					this.datainsList[0] = response.data.data
					
					this.tabslist2[0].count=response.data.recordsTotal
					
					this.isReadyinsList = true
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})

				})
				
				API.recordList({
					pageIndex: 1,
					pageSize: 20,
					status: 0,
					chargingType:"0"
				}).then((response) => {
					this.datainsList[1] = response.data.data
					
					this.tabslist2[1].count=response.data.recordsTotal
					
					this.isReadyinsList = true
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				
				})
			},
			getdaysDistance( time2) {
				if (!time2) {
					return '-'
				}
			
				return daysDistanceTrue(new Date(),time2)
			},
			getHourDistanceArr(time) {
				if (!time) {
					return '-'
				}
				return hourDistanceArr(time, new Date())[0]


			},
			change1(e) {
				this.current1 = e

				//this.dataerrList = []

				//this.geterrList()
			},
			change2(e) {
				this.current2 = e
			
				//this.datainsList = []
			
				//this.getinsList()
			},
			isToday(dateStr) {
				if (!dateStr) {
					return false
				}
				// 将传入的日期字符串转换为Date对象
				const targetDate = newDate(dateStr);
				// 获取当前日期
				const today = new Date();

				// 比较年份、月份和日期是否相等
				return (
					targetDate.getFullYear() === today.getFullYear() &&
					targetDate.getMonth() === today.getMonth() &&
					targetDate.getDate() === today.getDate()
				);
			},
			query() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.findByOpenId({
					noerror: true,
					openId: this.jphelp.getOpenId(),


				}).then((response) => {
					uni.hideLoading();
					if (response.message) {
						uni.hideLoading();

					} else {
						this.loginset(response)


					}
					this.roleList = this.jphelp.getPersonInfoPlus().roleList



				}).catch(error => {

					uni.hideLoading();

				})
			},
			geterrList() {
				
			
				API.errList({
					pageIndex: 1,
					pageSize: 5,
					status: 0,
					chargingType:"1"
				}).then((response) => {
					this.dataerrList[0] = response.data.data
					
					//this.dataerrRecordsTotal = response.data.recordsTotal
					this.tabslist[0].count=response.data.recordsTotal
					this.isReadyerrList = true
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				
				API.errList({
					pageIndex: 1,
					pageSize: 5,
					status: 0,
					chargingType:"0"
				}).then((response) => {
					this.dataerrList[1] = response.data.data
					this.tabslist[1].count=response.data.recordsTotal
					//this.dataerrRecordsTotal = response.data.recordsTotal
					this.isReadyerrList = true
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				
			},
			getfloorStatus() {

				API.floorStatus().then((response) => {
					var obj = response.data;
					var sz = ['gunFaultNum', 'gunFreeNum', 'gunOfflineNum', 'gunWorkNum']
					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.gunWorkNum,
								itemStyle: {
									color: 'rgba(0, 185, 98, 1)'
								}
							},
							{
								value: this.datafloorStatus.gunFreeNum,
								itemStyle: {
									color: '#999999'
								}
							},
							{
								value: this.datafloorStatus.gunOfflineNum,
								itemStyle: {
									color: '#FF9600'
								}
							},
							{
								value: this.datafloorStatus.gunFaultNum,
								itemStyle: {
									color: '#FF3D00'
								}
							}
						]
					}],
					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;
			display: flex;
			align-items: center;
		}

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

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

	.panel {
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 8rpx 16rpx 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: 16rpx;
					width: 96rpx;
					height: 96rpx;
				}

				margin-right: 16rpx;
			}

			.logo_text {
				color: #fff;

				.logo_text1 {
					font-size: 40rpx;
				}

				.logo_text2 {
					font-size: 32rpx;

				}
			}
		}

		.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: 2rpx 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;
		padding-bottom: 0;
		.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: #FF3D00;
					}

					.status3 {
						background-color: #FF9600;
					}

					.status4 {
						background-color: #999999;
					}
				}

			}
		}
	}

	.main_list1 {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 24rpx;
		padding-bottom: 36rpx;

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

		.list-body {
			padding: 24rpx 0;

			.item {
				border-bottom: 2rpx solid rgba(232, 232, 232, 1);
				display: flex;
				justify-content: space-between;
				padding: 12rpx 0;
				margin: 12rpx 0;

				.line1 {
					.value {
						color: #777777;
						font-size: 24rpx;
						margin-top: 8rpx;
					}
				}

				.line2 {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					white-space: pre;
				}
			}


		}

		.item:not(:first-child) {
			//background-color: red;
			border-top: 0rpx solid rgba(232, 232, 232, 1);
		}

		.list {
			//padding: 24rpx 0;

			.item {
				display: flex;
				border-top: 2rpx 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 {
						
						font-size: 32rpx;
						.value{
							    white-space: pre;
						}

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

						}

						.status0 {
							background-color: #FF7B00;

						}

						.status1 {
							background-color: #007aff;

						}

						.status2 {
							background-color: #ff9900;

						}

						.status3 {
							background-color: #19be6b;

						}

						.status4 {
							border: 2rpx 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:2rpx solid rgba(232,232,232,1);
			// }
		}
	}

	.getHourDistanceArrNum10 {
		color: #FF7B00;
	}

	.getHourDistanceArrNum12 {
		color: red;
	}

	.getHourDistanceArrNum24 {
		color: #8161FF;
	}
	.badge{
		//width: 40rpx;
		//height: 40rpx;
		background-color: red;
		border-radius: 50px;
		    display: inline-block;
			padding: 2rpx 8rpx;
			color: #fff;
			    text-align: center;
				font-size: 22rpx;
				    display: flex;
				    align-items: center;
				
	}
</style>