jp-floorlock-Inspection/pages/lockTab/dataLock.vue

<template>
	<view>
		<u-navbar :title="title" :backIconColor="'#ffffff'" title-color="#ffffff"
			:background="backgroundObj"></u-navbar>
		<view class="gradient-header">
			<view class="jpback">

			</view>
		</view>
		<u-picker title="日期选择" :maskCloseAble="true" v-model="body0data.tabsFrom.show"
			:defaultTime="body0data.tabsFrom.showIndex+'-1'" mode="time" :params="body0data.tabsFrom.params"
			@confirm="selector2confirm" @cancel="selector2cancel">
		</u-picker>

		<view class="main">
			<view class="statistics ">
				<view class="data1">
					<view class="item">
						<view class="line">
							<view class="name">
								{{floorlockInfo.name}}
							</view>
							<view class="item-tags">
								<view class="tag tag1" :class="'typeN typeN'+floorlockInfo.type">
									{{floorlockInfo.typeN}}

								</view>
								<!-- <view class="tag" :class="'statusN statusN'+floorlockInfo.status">
									{{floorlockInfo.statusN}}
							
								</view>
								<view class="tag" :class="'lockStatusN lockStatusN'+floorlockInfo.lockStatus">
									{{floorlockInfo.lockStatusN}}
								</view> -->
							</view>
						</view>
						<view class="line">
							编号：{{floorlockInfo.lockNo}}
						</view>
					
					</view>
					<view class="value" v-if="0">
						<u-button type="primary" size="mini" shape="circle">
							<img class="img" src="@/assets/img/button/lock.svg" alt="">
							降锁
						</u-button>
					</view>
				</view>

				<view class="top-span">
					<view class="item-span">
						<img src="@/assets/img/topspan/span1.png">
						<span>地锁</span>
						<span v-if="floorlockInfo.parkingStatus==1" style="color: #1677FF;">有车</span>
						<span v-else-if="floorlockInfo.parkingStatus==0" style="color: #00B962;">无车</span>
					</view>
					<view class="item-span">
						<img src="@/assets/img/topspan/span2.png">
						<span>地锁</span>
						<span style="color: red;" v-if="floorlockInfo.lockStatus==4||floorlockInfo.lockStatus==0">
							错误</span>
						<span v-else-if="floorlockInfo.lockStatus==1" style="color: #1677FF;">升起</span>
						<span v-else-if="floorlockInfo.lockStatus==2" style="color: #00B962;">降落</span>
						<span v-else>其他</span>

					</view>
					<view class="item-span">
						<img src="@/assets/img/topspan/span4.png">
						<span>网络</span>
					
						<span v-if="floorlockInfo.status==1" style="color: #00B962;">在线</span>
						<span v-else-if="floorlockInfo.status==0" style="color: red">离线</span>
					
					
					</view>
					<view class="item-span">
						<img src="@/assets/img/topspan/span3.png">
						<span>电压</span>
						<span v-if="floorlockInfo.batteryLevel||floorlockInfo.batteryLevel==0">{{floorlockInfo.batteryLevel}}V</span>
						<span v-else>未知</span>
					</view>
					

					
					
					
					<view class="item-span">
						<img src="@/assets/img/topspan/span6.svg">
						<span>电流</span>
					
					
						<span v-if="floorlockInfo.ampere||floorlockInfo.ampere==0">{{floorlockInfo.ampere}}A</span>
						<span v-else>未知</span>
					</view>
					<view class="item-span">
						<img src="@/assets/img/topspan/span7.svg">
						<span>功率</span>
					
					
						<span v-if="floorlockInfo.power||floorlockInfo.power==0">{{floorlockInfo.power}}W</span>
						<span v-else>未知</span>
					</view>
					
					<view class="item-span">
						<img src="@/assets/img/topspan/span5.png">
						<span>雷达</span>
					
					
						<span v-if="floorlockInfo.radarStatus==0" style="color: #00B962;">正常</span>
						<span v-else-if="floorlockInfo.radarStatus==1" style="color: red">故障</span>
					
					
					</view>
					
					<view class="item-span">
						<img src="@/assets/img/topspan/span8.svg">
						<span>限位器</span>
					
					
						<span v-if="floorlockInfo.lockStatus==1||floorlockInfo.lockStatus==2||floorlockInfo.lockStatus==3" style="color: #00B962;">正常</span>
						<span v-else  style="color: red">故障</span>
					
					</view>
					
					
					<view class="line" style="    color: #909399;">
						更新时间：{{floorlockInfo.lastOnlineTime}}
					</view>
					
				</view>
			</view>


			<u-picker v-model="body2data.vue.show" :params="body2data.vue.params"
				:default-time="body2data.query.startTime" @confirm="body2dataconfirm" mode="time"></u-picker>






			<!-- end-->
			<view class="statistics " v-if="0">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>地锁异常记录</view>

						<view class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body6">
						<view class="body6main">
							<view class="line" v-for="(item,index) in abnormalRecordsList" :key="index">
								<view class="abnormal-item">
									<!-- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)"
								 -->
									<view class="item-title">

										<view class="name">
											<span v-if="item.level==1" class="level level1 ">一级</span>
											<span v-if="item.level==2" class="level level2">二级</span>

											{{item.content}}
										</view>
										<view class="date"
											style="display: flex;    justify-content: space-between;margin-top: 4rpx;">
											<view>{{item.title}}</view>
											<view>{{item.createTime}}</view>

										</view>
									</view>

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

						</view>



					</jpContent>
				</view>
			</view>
			<!-- end-->

			<view class="statistics ">
				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>地锁信息</view>

						<view class="check-all" v-show="listShow" @click="listShow=false">
							展开<u-icon name="arrow-down" size="32" color="#AAAAAA"></u-icon>
						</view>
						<view class="check-all" v-if="!listShow" @click="listShow=true">
							收起<u-icon name="arrow-up" size="32" color="#AAAAAA"></u-icon>
						</view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body8">
						<view class="body8main">

							<view class="table">



								<view class="row">
									<view class="name">地锁管理者</view>
									<view class="value">
										{{floorlockInfo.contacts?floorlockInfo.contacts:floorlockInfo.administrator}}
									</view>
								</view>
								<view class="row" v-if="floorlockInfo.contacts&&floorlockInfo.contactPhone">
									<view class="name">联系电话</view>
									<view class="value">{{floorlockInfo.contactPhone}}</view>
								</view>



								<view class="row">
									<view class="name">地锁型号</view>
									<view class="value">{{infotext(floorlockInfo.model)}}</view>
								</view>


								<view class="row">
									<view class="name">出厂编号</view>
									<view class="value">{{infotext(floorlockInfo.factoryNumber)}}</view>
								</view>
								<template v-if="!listShow">
									<view class="row">
										<view class="name">固件版号</view>
										<view class="value">{{infotext(floorlockInfo.solidVersion)}}</view>
									</view>
									<view class="row">
										<view class="name">防护等级</view>
										<view class="value">{{infotext(floorlockInfo.protectionGrade)}}</view>
									</view>



									<view class="row">
										<view class="name">生产日期</view>
										<view class="value">{{infotext(floorlockInfo.manufactureDate)}}</view>
									</view>

									<view class="row">
										<view class="name">标准依据</view>
										<view class="value">{{infotext(floorlockInfo.standardBasis)}}</view>
									</view>
									<view class="row">
										<view class="name">联网卡号</view>
										<view class="value">{{infotext(floorlockInfo.internetCard)}}</view>
									</view>
									<view class="row">
										<view class="name">有效期至</view>
										<view class="value">
											{{floorlockInfo.cardExpirationDate?floorlockInfo.cardExpirationDate.split(' ')[0]:''}}
										</view>
									</view>
									<view class="row" v-if="floorlockInfo.tariffStandard">
										<view class="name">资费标准</view>
										<view class="value">{{infotext(floorlockInfo.tariffStandard)}}元/月</view>
									</view>
									<view class="row">
										<view class="name">地锁启动时间</view>
										<view class="value">{{infotext(floorlockInfo.activationTime)}}</view>
									</view>
									<view class="row" v-if="floorlockInfo.shelfLife">
										<view class="name">地锁质保期</view>
										<view class="value">{{infotext(floorlockInfo.shelfLife)}}年</view>
									</view>
								</template>

							</view>


						</view>

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

			<view class="statistics main_list1 panel">


				<view class="title">
					<view class="icon">
						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
					</view>
					<view class="text">
						<view>故障记录</view>

						<view class="check-all" @click="gotoUrl('/pages/task/listTask?lockId='+floorlockInfo.id+'&lockName='+floorlockInfo.name)">
							查看详情
							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>


					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body9">
						<view class="body9main">

							<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="line1title">
												{{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>

								<u-divider color="#F44336" v-if="dataerrRecordsTotal>3"
									@click="gotoUrl('/pages/task/listTask?lockId='+floorlockInfo.id+'&lockName='+floorlockInfo.name)">故障记录{{dataerrRecordsTotal}}条，点击查看更多</u-divider>

							</view>
						</view>

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



			<!-- end-->
			<u-divider border-color="#CFD2D5">已经到底了</u-divider>

		</view>

	</view>
</template>

<script>
	import jpContent from '@/components/JPcontent.vue'
	import * as echarts from 'echarts';
	import * as API from '@/apis/pagejs/deviceTab.js'
	import * as API_index from '@/apis/pagejs/index.js'
	import {
		parseUnixTime,
		beforeTimeStamp,
		newDate
	} from '@/apis/utils'

	export default {
		components: {

			jpContent
		},
		data() {
			return {
				id: "",
				dataerrList: [],
				dataerrRecordsTotal: 0,
				isReadyfloorStatus: false,

				floorlockInfo: {},
				echartsList: {},
				lockUsageRateData: {},
				body2data: {
					query: {},
					vue: {
						queryN: "",
						show: false,
						params: {
							year: true,
							month: true,
							day: false,
							hour: false,
							minute: false,
							second: false
						}
					},
					data: {}
				},
				listShow: true,
				body0data: {
					query: {},
					data: {},
					tabsFrom: {
						show: false,
						showIndex: "",
						params: {
							year: true,
							month: true,
							day: false,
							hour: false,
							minute: false,
							second: false
						}
					}

				},
				body4data: {
					query: {},
					data: {}
				},
				body8data: {
					query: {},
					data: {},
					popup: false,
				},
				body3data: {
					query: {},
					data: {}
				},
				jpContentMap: {
					body1: 2,
					body2: 2,
					body3: 2,
					body4: 2,
					body5: 2,
					body6: 2,
					body7: 2,
					body8: 2,
					body9: 2,
					body10: 2,
				},
				title: "",
				backgroundObj: {
					background: '#307AF6'
				},
				radiovalue: "1",
				radiolist: [{
						name: '上月',
						value: "3"
					},
					{
						name: '当月',
						value: "1"
					},
					{
						name: '今日',
						value: "2"
					}, {
						name: '当年',

						value: "4"
					}, {
						name: '合计',

						value: "5"
					},
					{
						name: '指定月份',
						value: "0"
					}
				],
				abnormalRecordsList: [{
						level: 1,
						content: "1111111",
						title: "11",
						createTime: "123:123"
					},
					{
						level: 2,
						content: "1111111",
						title: "11",
						createTime: "123:123"
					}
				],
			};
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id
				this.init();
			}
			this.body0data.tabsFrom.showIndex = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
		},
		onReady() {
			// if(this.id){

			// }


		},
		onShow() {


			if (this.isReadyerrList) {
				this.geterrList()
			}

		},
		methods: {
			geterrList() {
			this.jpContentMap.body9 = 0
				API.errList({
					pageIndex: 1,
					pageSize: 3,
					status: 0,
					lockId:this.id
				}).then((response) => {
					this.dataerrList = response.data.data
					this.dataerrRecordsTotal = response.data.recordsTotal
					this.isReadyerrList = true
					if(this.dataerrRecordsTotal ){
						this.jpContentMap.body9 = 2
					}else{
						this.jpContentMap.body9 = 1
					}
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})

				})
			},
			infotext(text) {
				if (text) {
					return text
				} else {
					return ""
				}
			},
			durationShow() {
				if (this.lockUsageRateData.duration) {
					var m = this.lockUsageRateData.duration % 60
					var h = parseInt(this.lockUsageRateData.duration / 60)
					if (h > 0) {
						if (h > 24) {
							var day = parseInt(h / 24)
							h = h % 24
							var px = uni.upx2px(12 * 2)
							if (day > 100) {
								return `${day}<span style='font-size: ${px}px;'>天</span>`
							} else {
								return `${day}<span style='font-size: ${px}px;'>天</span>${h}h`
							}

						} else {
							return `${h}h${m}m`
						}

					} else {
						return `${m}m`
					}
				} else {
					return '0m'
				}
			},
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			selector2confirm(e) {
				var time = e.year + "-" + e.month
				this.radiolist[5].name = e.year + "年" + e.month + "月"
				this.body0data.tabsFrom.showIndex = time
				this.getLockUsageRate()
			},
			selector2cancel() {
				this.radiovalue = "1"
				this.radiolist[5].name = "指定月份"
				this.getLockUsageRate()
			},
			radioGroupChange(e) {
				console.log(e);
				if (e == 0) {
					this.body0data.tabsFrom.show = true
				} else {
					this.radiolist[5].name = "指定月份"
					this.getLockUsageRate()
				}

			},
			init() {
				this.getInfo()
				this.geterrList()
				//this.getLockUsageRate()
				//	this.occupancyByTime(1)
				//this.getbody1()
				//this.getbody2()
				//this.occupancyByTimeBar(1);
				//this.getbody3()
				//this.getbody4()
				//this.durationDistribution()
			},
			occupancyByTime(init) {
				if (init) {
					var date = new Date();

					this.body2data.vue.queryN = date.getFullYear() + "年" + (date.getMonth() + 1) + '月';
					this.body2data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"

					var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
					this.body2data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')

				}
				this.jpContentMap.body2 = 0
				this.body2data.query.floorId = this.id

				API_index.occupancyByTime(
					this.body2data.query
				).then((response) => {
					this.body2data.data = [
						...response.data.locksTimeList,
						//	...response.data.locksTimeList,
					];

					if (this.body2data.data.length == 0) {
						this.jpContentMap.body2 = 1


					} else {
						this.jpContentMap.body2 = 2

						this.getbody2()


					}



				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})

				})
			},
			body2dataconfirm(e) {

				var date = new Date(e.year + "-" + e.month + "-1");
				this.body2data.vue.queryN = date.getFullYear() + "年" + (date.getMonth() + 1) + '月';
				this.body2data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"

				var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
				this.body2data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')

				this.occupancyByTime()
			},
			getLockUsageRate() {
				var obj = {
					floorId: this.id,
					queryType: this.radiovalue
				}
				if (this.radiovalue == 0) {
					obj.queryMonth = this.body0data.tabsFrom.showIndex
				}
				API.lockUsageRate(obj).then((res) => {
					this.lockUsageRateData = res.data

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			durationDistribution() {
				this.jpContentMap.body4 = 0

				var date = new Date();
				//test
				//this.body4data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"

				var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
				//	this.body4data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')


				this.body4data.query.floorId = this.id
				API_index.durationDistribution(
					this.body4data.query
				).then((response) => {
					this.body4data.data = response.data.distribution;

					if (this.body4data.data.length == 0) {
						this.jpContentMap.body4 = 1

					} else {
						this.jpContentMap.body4 = 2
						//this.getbody3()
						this.getbody4()
					}

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})

				})
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj = {
					id: this.id
				}
				this.jpContentMap.body8 = 0
				API.lockDetails(obj).then((res) => {
					this.floorlockInfo = res.data.floorlockInfo
					this.title = this.floorlockInfo.parkingName
					uni.hideLoading();
					this.jpContentMap.body8 = 2
					//this.getWhiteList()
				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getbody1() {
				var key = "body1pie1"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(300 * 2),
						height: uni.upx2px(170 * 2)
					})

				}
				myChart.clear()


				var option = {

					grid: {
						top: 20,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: [{

						type: 'pie',
						radius: ['80%', '50%'],
						radius: [35, 50],
						data: [{
								itemStyle: {
									color: "#EB3C31"
								},
								value: 1048,
								name: '0.5小时\n20%',

							},
							{
								itemStyle: {
									color: "#EF8132"
								},

								value: 735,
								name: '2小时\n10%'
							},
							{
								itemStyle: {
									color: "#929292"
								},
								value: 580,
								name: '2-6小时\n30%'
							},


						]

					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody4() {
				var key = "body4pie1"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(300 * 2),
						height: uni.upx2px(170 * 2)
					})

				}
				myChart.clear()
				var dataApi = this.body4data.data;

				var data = []
				var num = 0
				var sum = 0
				Object.keys(dataApi).forEach(key1 => {
					num += dataApi[key1]
				});
				var i = 0
				Object.keys(dataApi).forEach(key1 => {
					var value = dataApi[key1]
					if (value != 0) {
						var obj = {
							value: value,
							name: key1
						}

						if (num != 0) {
							var valueInt = parseInt(value / num * 100)
							if (valueInt == 0 && value != 0) {
								valueInt = 1
							}
							sum += valueInt;

							if (i == Object.keys(dataApi).length - 1) {
								if (sum != 100) {
									valueInt += (100 - sum)
								}
							}
							obj.name += '\n' + (valueInt) + '%'
						}
						data.push(obj)
					}
					i++;
				});

				var option = {

					grid: {
						top: 20,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: [{

						type: 'pie',
						radius: ['80%', '50%'],
						radius: [45, 60],
						data: data

					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			occupancyByTimeBar(init) {
				if (init) {
					var date = new Date();
					//test
					//this.body3data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"

					var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
					//this.body3data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')

				}
				this.jpContentMap.body3 = 0

				this.body3data.query.floorId = this.id
				API_index.occupancyByTimeBar(
					this.body3data.query
				).then((response) => {
					this.body3data.data = [
						...response.data.locksTimeList,
						//	...response.data.locksTimeList,
					];

					if (this.body3data.data.length == 0) {
						this.jpContentMap.body3 = 1

					} else {
						this.jpContentMap.body3 = 2
						this.getbody3()

					}



				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})

				})
			},
			getbody3() {
				var key = "body3bar1"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(300 * 2),
						height: uni.upx2px(170 * 2)
					})

				}
				var dataApi = this.body3data.data;

				myChart.clear()

				var data1 = []
				var data2 = [] //useDays
				var i = 0
				dataApi[0].timeUseList.forEach(item => {

					Object.keys(item).forEach(key1 => {

						data1.push(key1 + '点')
						var num = 0

						dataApi.forEach(item2 => {
							num += item2.timeUseList[i][key1].useDays

						})
						data2.push(num)
					});
					i += 1

				})

				var axisLabel = {
					rotate: 40,
					interval: 0,
					textStyle: {
						color: "#333"
					}
				}
				if (data1.length < 7) {
					axisLabel = {
						interval: 0,
						textStyle: {
							color: "#333"
						},
					}
				} else {
					axisLabel.interval = 0;
				}
				var option = {
					xAxis: {
						type: 'category',
						data: data1,
						axisLabel: axisLabel,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: function(params) {
							var result = params[0].name + '<br/>';
							for (var i = 0; i < params.length; i++) {
								result += params[i].marker + ' ' + params[i].value + '次<br/>';
							}
							return result;
						}
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						top: 20,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: [{
						itemStyle: {
							color: "#5A88E5"
						},
						data: data2,
						type: 'bar'
					}]
				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody2() {
				var key = "body2line1"
				var myChart = this.echartsList[key];
				var dataApi = this.body2data.data;

				var head = 20 * (parseInt(dataApi.length / 4)) + 20


				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(300 * 2),
						height: uni.upx2px((170 + head) * 2)
					})

				}
				myChart.clear()

				var data1 = []
				var series = [];

				dataApi.forEach(item => {

					var obj = {
						name: item.lockName,
						areaStyle: {},
						itemStyle: {
							color: "#BBD4FB"
						},
						label: {
							show: true,
							position: 'top',
							color: "#307AF6"
						},
						data: [],
						type: 'line'
					}
					if (dataApi.length == 1) {
						obj.label.color = "#307AF6"
						obj.areaStyle = {}
						obj.itemStyle = {
							color: "#BBD4FB"
						}
					}

					item.timeUseList.forEach(item2 => {
						Object.keys(item2).forEach(key1 => {

							obj.data.push(item2[key1].useRate)
						});
					})
					series.push(obj)
				})
				dataApi[0].timeUseList.forEach(item => {

					Object.keys(item).forEach(key1 => {
						data1.push(key1)

					});

				})
				var axisLabel = {
					rotate: 40,
					interval: 0,
					textStyle: {
						color: "#333"
					}
				}
				if (data1.length < 7) {
					axisLabel = {
						interval: 0,
						textStyle: {
							color: "#333"
						},
					}
				} else {
					axisLabel.interval = 0;
				}
				var option = {
					xAxis: {
						type: 'category',
						data: data1,
						axisLabel: axisLabel,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},

						formatter: function(params) {
							var result = params[0].name + '点<br/>';
							for (var i = 0; i < params.length; i++) {
								result += params[i].marker + params[i].seriesName + ': ' + params[i].value +
									'%<br/>';
							}
							return result;
						}
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						top: (20 + head),
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					series: series,

				};
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
		}
	}
</script>

<style lang="scss">
	.gradient-header {
		height: 0px;
	}

	.jpback {
		height: 268rpx;
		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 20%, rgba(121, 177, 255, 1) 100%);
	}

	.main {

		padding: 32rpx;

		.no_statistics {
			margin-bottom: 24rpx;
		}

		.statistics {
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
			margin-bottom: 24rpx;
			padding: 40rpx;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				font-weight: bold;

				.img {
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
					border-radius: 999px;

				}

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

					.change-img {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}

					text {

						margin-left: 8rpx;
					}
				}


				.text {
					color: rgba(16, 16, 16, 1);
					font-size: 36rpx;
					margin-left: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;

					.tag {
						border-radius: 4px;
						border: 1px solid rgba(187, 187, 187, 1);
						color: rgba(51, 51, 51, 1);

						font-size: 24rpx;
						padding: 1px 8rpx;
						margin-left: 8rpx;
					}

				}

				.change {
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #838383;

				}

				.check-all {
					margin-left: auto;
					color: rgba(131, 131, 131, 1);
					font-size: 24rpx;
				}
			}
		}
	}

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

		.item {
			.line {
				display: flex;
				align-items: center;
			}

			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 36rpx;
				font-weight: bold;
				margin-right: 8rpx;
			}

			.item-tags {
				display: flex;

				.tag {
					border-radius: 4px;

					background-color: rgba(39, 177, 72, 1);
					color: rgba(255, 255, 255, 1);
					font-size: 24rpx;
					padding: 2rpx 8rpx;
					margin-right: 8rpx;
				}

				.typeN1 {
					background-color: rgba(22, 119, 255, 1);
				}

				.typeN2 {
					background-color: #8161ff;
					background-color: #8161ff;
				}

				.statusN {
					background-color: #838383
				}

				.lockStatusN {

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

				.lockStatusN2 {
					background-color: #03A9F4
				}

			}
		}

		.value {
			.img {
				margin-right: 8rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.data2 {
		height: 336rpx;
		padding: 32rpx;
		border-radius: 12px;
		background: linear-gradient(180deg, rgba(222, 222, 222, 1) 3%, rgba(255, 255, 255, 1) 5%, rgba(232, 232, 232, 1) 56%, rgba(255, 255, 255, 1) 59%, rgba(236, 236, 236, 1) 95%, rgba(215, 215, 215, 1) 98%);

		.top {
			background-repeat: round;
			background-image: url('@/assets/img/deviceTab/index3-2.png');
			display: flex;
			justify-content: space-around;
			text-align: center;
			height: 152rpx;
			align-items: center;

			.item {
				.name {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}

				.value {
					color: rgba(16, 16, 16, 1);
					font-size: 48rpx;
					font-weight: bold;
				}
			}
		}

		.body {
			padding: 16rpx;
		}
	}

	.body5data {
		.line {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.data {
				display: flex;
				width: 80%;
				justify-content: space-between;

				.item {
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
				}

				.value {
					color: rgba(119, 119, 119, 1);
					font-size: 16px;
				}
			}
		}
	}

	.body7data {
		.line {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.value {
				width: 33%;
				padding: 16rpx;
				color: rgba(51, 51, 51, 1);


			}

			.value:nth-child(3) {

				text-align: center;

			}
		}

		/* 隔行变色: 偶数行设置背景色 */
		.line:nth-child(odd) {
			background-color: #F2F2F2;
			/* 偶数行 */
		}

		.line:nth-child(even) {
			background-color: #FFFFFF
				/* 奇数行 */
		}

	}

	.body8main {
		.line {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.value {
				width: 33%;
				padding: 16rpx;

				text-align: center;

				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

		}

		/* 隔行变色: 偶数行设置背景色 */
		.line:nth-child(odd) {
			color: rgba(119, 119, 119, 1);
			font-size: 14px;
			/* 偶数行 */
		}

		.line:nth-child(even) {
			color: rgba(16, 16, 16, 1);
			font-size: 16px;

			/* 奇数行 */
		}

		.table {
			.table_v {
				width: 100%;
			}

			.table_tr {

				display: flex;
				justify-content: space-between;
			}

			.row {
				display: flex;
				align-items: center;
				height: 72rpx;
				font-size: 28rpx;
				padding: 0 24rpx;

				.name {
					width: 240rpx;
				}

			}

			.table_td {

				height: 72rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;


			}

			.table_td1 {
				width: 30%;
			}

			.table_td2 {
				width: 30%;
			}

			.table_td3 {
				width: 30%;
			}

			.table_td4 {
				width: 10%;
			}

			/* 隔行变色: 偶数行设置背景色 */
			.row:nth-child(odd) {
				background-color: #f9f9f9;
				/* 偶数行 */
			}

			.table_tr:nth-child(odd) {
				background-color: #f9f9f9;
				/* 偶数行 */
			}

			.row:nth-child(even) {
				background-color: #ffffff;
				/* 奇数行 */
			}

			.table_tr:nth-child(even) {
				background-color: #ffffff;
				/* 奇数行 */
			}

		}

	}

	.body6main {
		.line {
			display: flex;
			justify-content: space-between;
		}

		.abnormal-item:last-of-type {
			border-bottom: none !important;
			padding-bottom: 0;
		}

		.abnormal-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx;
			border-bottom: 1px solid rgba(245, 245, 245, 1);


			.item-title {
				.level {
					color: #fff;

					border-radius: 8rpx;
					font-weight: 400;
					padding: 4rpx 8rpx;
					font-size: 22rpx;
					margin-right: 2px;
				}

				.level1 {
					background: red;
				}

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

				color: rgba(51, 51, 51, 1);
				width: 100%;

				.img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				.name {
					color: rgba(51, 51, 51, 1);
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.date {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
				}
			}

			.item-value {
				text-align: right;
				display: flex;
				align-items: center;

				.more {
					margin-left: 8rpx;
				}

				.value1 {
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}

				.value2 {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
				}
			}
		}
	}

	// 地锁信息弹窗
	.body8data-popup {

		.content {

			padding: 32rpx;

			.headline {
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				text-align: center;
				font-weight: bold;
				margin-bottom: 24rpx;
			}

			.infos {
				//padding-bottom: 100rpx;

				.item:last-of-type {
					border: none;
				}

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

					//line-height: 48rpx;
					padding: 20rpx 0;
					border-bottom: 1px solid #cccccc;

					.item-title {
						color: rgba(51, 51, 51, 1);
						width: 200rpx;
					}

					.item-value {
						color: #666666;
						flex: 1;
						margin-left: 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.img {
							width: 32rpx;
							height: 32rpx;
							transform: rotate(90deg);
							margin-left: 96rpx;
						}
					}
				}

			}

			.get {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 4px;
				background-color: rgba(22, 119, 255, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 32rpx;
			}
		}
	}

	.top-span {
		border-top: 1px solid rgba(245, 245, 245, 1);
		display: flex;
		flex-wrap: wrap;
		
		padding-top: 16rpx;
		margin-top: 16rpx;
		.line{
			margin-top: 8rpx;
			font-size: 24rpx;
		}
		.item-span {
			white-space: pre;
			display: flex;
			align-items: center;
			margin-top: 8rpx;
			width: 33%;
			font-size: 28rpx;

			span {
				margin: 0 8rpx;
			}

			img {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.lockStatusX1 {
			color: #00B962;
		}

		.lockStatusX2 {
			color: #1677FF;
		}

		.statusX1 {
			color: #00B962;
		}

		.statusX2 {
			color: #1677FF;
		}
	}


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