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

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

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

		<!-- <u-picker v-model="body5data.vue.show" :default-time="body5data.query.queryDate" :params="body5data.vue.params"
			@confirm="body5dataconfirm" mode="time"></u-picker> -->
			
			<u-calendar v-model="body5data.vue.show" mode="date" @change="body5dataconfirm"></u-calendar>


		<view class="navbar">
			智泊e家 运管端

		</view>
		<view class="tabs-box">

			<u-picker-jp v-model="showselect1" range-key="name" :num="3" @confirm="showselect1confirm"
				:range="companyList"></u-picker-jp>

			<template v-if="companyListTabs.length>2">
				<u-tabs ref="tabs" :list="companyListTabs" bg-color="#1677ff" :current="current1" inactive-color="#fff"
					@change="utabsChange1" item-width="180" height="70" gutter="10" active-color="#fff"></u-tabs>
				<view class="tabs-box-other" v-if="companyList.length>3" @click="utabsChange1other">
					更多
				</view>
			</template>

		</view>

		<view class="main">

			<u-picker-jp v-model="showselect2" range-key="name" :num='3' @confirm="showselect2confirm"
				:range="parkingList"></u-picker-jp>

			<view class="tabs-box2" v-show="parkingListTabs.length>2">
				<u-tabs ref="tabs2" gutter="10" :list="parkingListTabs" :current="current2" @change="utabsChange2"
					item-width="180" bg-color="#f2f4f6" height="70"></u-tabs>
				<view v-if="parkingList.length>3" class="tabs-box-other" @click="utabsChange2other">
					更多
				</view>
			</view>

			<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="contentBody">
					<jpContent :status="jpContentMap.body1">
						<view class="body1pie-table">
							<view class="tr">
								<view class="td td1">
									<view id="body1pie1" class="body1pie">

									</view>
								</view>
								<view class="td td2">
									<view class="td td3">
										<view class="td td4">空闲<span
												class="body1pie-num color53B56B">{{body1data.data.idleNum}}</span>台
										</view>
										<view class="td td4">占用<span
												class="body1pie-num colorAAAAAA">{{body1data.data.useNum}}</span>台
										</view>
									</view>
									<view class="td td3">

										<view class="td td4">公共地锁<span
												class="body1pie-num colorEF8132">{{body1data.data.publicNum}}</span>台
										</view>
										<view class="td td4">私家地锁<span
												class="body1pie-num colorDC4441">{{body1data.data.privateNum}}</span>台
										</view>
									</view>
								</view>

							</view>

							<view class="tr">
								<view class="td td1">
									<view id="body1pie2" class="body1pie">

									</view>
								</view>
								<view class="td td2">
									<view class="td td3">

										<view class="td td4">正常<span
												class="body1pie-num color53B56B">{{body1data.data.normalNum}}</span>台
										</view>
										<view class="td td4">离线<span
												class="body1pie-num colorAAAAAA">{{body1data.data.loseNum}}</span>台
										</view>
									</view>
									<view class="td td3">

										<view class="td td4">故障<span
												class="body1pie-num colorEF8132">{{body1data.data.errorNum}}</span>台
										</view>
										<view class="td td4" v-if="0">低电量<span
												class="body1pie-num colorDC4441">5</span>台</view>
									</view>
								</view>
							</view>

							<view class="tr" v-if="0">
								<view class="td td1">
									<view id="body1pie3" class="body1pie">

									</view>
								</view>
								<view class="td td2">
									<view class="td td3">

										<view class="td td4">管理员<span class="body1pie-num color307AF6">5</span>人</view>
										<view class="td td4">白名单<span class="body1pie-num color53B56B">5</span>人</view>
									</view>
									<view class="td td3">

										<view class="td td4">游客<span class="body1pie-num colorEF8375">5</span>人次</view>
										<view class="td td4"></view>
									</view>
								</view>

							</view>


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

			<view class="statistics " v-show="1||companyId">
				<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="gotoDeviceList()">查看全部<u-icon name="arrow-right"></u-icon>
						</view>
			
					</view>
			
				</view>
			
				<view class="contentBody">
					<jpContent :status="jpContentMap.body7">
						<view class="body7main">
							<view class="line" v-for="(item,index) in equipmentList"
								@click="gotoUrl('/pages/deviceTab/dataLock?id='+item.id)" :key="index">
								<view class="item">
									<!-- 
								 -->
									<view class="item-title">
										
										<view class="item-name">
											{{item.name}}
										</view>
										<view class="item-tags">
											<view class="tag  " :class="'tag'+item.type">
												{{item.typeN}}
													
											</view>
											
											<view class="tag" :class="'lockStatus lockStatus'+item.lockStatus">
												{{item.lockStatusN}}
											</view>
										</view>
									</view>
									<view class="item-body">
										<span>编号：{{item.lockNo}}</span> <span v-if="item.batteryLevel" style="    margin-left: 16rpx;">电压：{{item.batteryLevel}}V</span>
									</view>
			
								</view>
								<view class="goto">
									<view  :class="'statusN statusN'+item.status">
										{{item.status==1?'在线':'离线'}}
											
									</view>
									<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
								</view>
								
							</view>
							<u-divider border-color="#CFD2D5" @click="gotoDeviceList()"
								v-if="equipmentList.length==10">最多显示10条,点击查看更多</u-divider>
			
						</view>
			
			
			
					</jpContent>
				</view>
			</view>
			
			<view class="statistics " v-show="1||companyId">
				<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/record/parkingRecord?compamyId='+companyId+'&parkingId='+parkingId)">查看全部<u-icon name="arrow-right"></u-icon>
						</view>
			
					</view>
			
				</view>
			
				<view class="contentBody">
					<jpContent :status="jpContentMap.body8">
						<view class="body8main">
							<view class="line" v-for="(item,index) in parkingRecord"
								@click="gotoUrl('/pages/record/parkingInfo?id='+item.id)" :key="index">
								
								<view class="data">
									
									<view class="view3">
										<u-icon name="clock"></u-icon>
										{{showTime(item.startTime)}}
										<template v-if="item.status!=0">
											{{item.endTime?'-'+showTime(item.endTime):'-当前'}}
										</template>
										
									</view>
									<view class="view1">
										{{item.parkingName}} {{item.lockName}}
									</view>
								</view>
								<view class="goto " :class="'status'+item.status">
									{{item.status==2?getTime(item):''}}
									{{item.status==1?'使用中':''}}
									{{item.status==0?'启动中':''}}
								
									<u-icon name="arrow-right" size="24" style="margin-left: 8rpx;" color="#BBBBBB"></u-icon>
								
								</view>
								
								
							</view>
							<u-divider border-color="#CFD2D5" @click="gotoUrl('/pages/record/parkingRecord?compamyId='+companyId+'&parkingId='+parkingId)"
								v-if="parkingRecord.length==5">最多显示5条,点击查看更多</u-divider>
			
						</view>
			
			
			
					</jpContent>
				</view>
			</view>

			<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="tag" @click="body5data.vue.show=true">{{body5data.vue.queryN}}<u-icon
								name="arrow-down"></u-icon></view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body5">
						<view class="body5main">

							<view id="body5echart" class="body5class">

							</view>

						</view>



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

			<view class="statistics " v-show="companyId">
				<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/myTab/abnormalList?companyId='+companyId)">
							查看全部<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>

			<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="tag" @click="body2data.vue.show=true">{{body2data.vue.queryN}}<u-icon
								name="arrow-down"></u-icon></view>

					</view>

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body2">
						<view class="body2lineChart">

							<view id="body2line1" class="body2line">

							</view>

						</view>



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

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

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body3">
						<view class="body3barChart">

							<view id="body3bar1" class="body3bar">

							</view>

						</view>



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

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

				</view>

				<view class="contentBody">
					<jpContent :status="jpContentMap.body4">
						<view class="body4pieChart">

							<view id="body4pie1" class="body4pie">

							</view>

						</view>



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


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

		</view>
		<tabbar :current="0"></tabbar>

	</view>
</template>

<script>
	import Tabbar from '@/components/Tabbar.vue'
	import jpContent from '@/components/JPcontent.vue'
	import * as echarts from 'echarts';

	import * as API from '@/apis/pagejs/index.js'

	import {
		parseUnixTime,
		beforeTimeStamp,
		newDate
	} from '@/apis/utils'


	export default {
		components: {
			Tabbar,
			jpContent
		},
		data() {
			return {
				current1: 0,
				showselect1: false,
				current2: 0,
				showselect2: false,
				isReady: false,
				companyList: [],
				parkingList: [],
				//companyListIndex:0,
				companyId: "",
				parkingId: "",
				echartsList: {},
				parkingRecord:[],
				equipmentList: [],
				abnormalRecordsList: [{
						level: 1,
						content: "1111111",
						title: "11",
						createTime: "123:123"
					},
					{
						level: 2,
						content: "1111111",
						title: "11",
						createTime: "123:123"
					}
				],
				body2data: {
					query: {},
					vue: {
						queryN: "",
						show: false,
						params: {
							year: true,
							month: true,
							day: false,
							hour: false,
							minute: false,
							second: false
						}
					},
					data: {}
				},
				body1data: {
					query: {},
					data: {},
					data1: {}
				},
				body4data: {
					query: {},
					data: {}
				},
				body3data: {
					query: {},
					data: {}
				},

				body5data: {
					query: {},
					data: {},
					vue: {
						queryN: "",
						show: false,
						params: {
							year: true,
							month: true,
							day: true,
							hour: false,
							minute: false,
							second: false
						}
					},
				},
				jpContentMap: {
					body1: 0,
					body2: 0,
					body3: 0,
					body4: 0,
					body5: 0,
					body6: 1,
					body7: 0,
					body8: 0,
					body9: 0,
					body10: 0,
				}
			}
		},
		onLoad() {

		},
		onReady() {
			this.getfindByOpenId();
		},
		computed: {
			companyListTabs() {
				var sz = []

				if (this.companyList.length > 3) {
					sz = [{
						id: "",
						name: '全部'
					}]
					sz.push(this.companyList[0])
					sz.push(this.companyList[1])
				} else {
					sz = [{
							id: "",
							name: '全部'
						},
						...this.companyList
					]
				}

				return sz
			},
			parkingListTabs() {
				var sz = []
				if (this.parkingList.length > 3) {
					sz = [{
						id: "",
						name: '综合查询'
					}]
					sz.push(this.parkingList[0])
					sz.push(this.parkingList[1])
				} else {
					sz = [{
							id: "",
							name: '综合查询'
						},
						...this.parkingList
					]
				}

				return sz
			},
		},
		methods: {
			
			showTime(time){
					if(time){
						return time.substr(5).replace('-','.')
					}else{
						return ''
					}
			},
			getTime(item){
				if(item.startTime&&item.endTime){
					var stime=newDate(item.startTime)
					var etime=newDate(item.endTime)
					//etime=new Date()
					var k=(etime.getTime()-stime.getTime())/1000/60
					
					var H=k/60
					var fen=k%(60)
					var str="";
					if(k>60){
						str+=parseInt(H)+'小时'
					}
					if(fen==0&&str!=''){
						
					}else{
						str+=parseInt(fen)+'分钟'
					}
					return str
				}else{
					return '已完成'
				}
			},
			
			gotoDeviceList() {
				if (this.parkingId) {
					this.gotoUrl('/pages/deviceTab/deviceList?parkingId=' + this.parkingId)
				} else {
					
					uni.switchTab({
							url: '/pages/deviceTab/index'
						})
					
				}
			},
			getfloorStatus() {
				this.jpContentMap.body1 = 0

				API.floorStatus({
					companyId: this.companyId,
					parkingId: this.parkingId
				}).then((response) => {
					this.body1data.data = response.data
					uni.hideLoading();
					this.jpContentMap.body1 = 2

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

				})

			},
			getParkingRecordList() {
				this.jpContentMap.body8 = 0
			
				API.parkingRecordList({
					companyId: this.companyId,
					parkingId: this.parkingId,
					pageSize: 5
				}).then((response) => {
					
					uni.hideLoading();
					if (response.data.totalPage) {
						this.jpContentMap.body8 = 2
						this.parkingRecord = response.data.data
					
					} else {
						this.jpContentMap.body8 = 1
					}
			
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
			
				})
			
			},
			getfloorlockList() {
				this.jpContentMap.body7 = 0

				API.floorlockList({
					companyId: this.companyId,
					parkingId: this.parkingId,
					pageSize: 10
				}).then((response) => {

					uni.hideLoading();
					if (response.data.totalPage) {
						this.jpContentMap.body7 = 2
						this.equipmentList = response.data.data
					

					} else {
						this.jpContentMap.body7 = 1
					}

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

				})
			},
			getApi1() {

				if (this.companyId == "") {

					this.getApi2()
				} else {
					this.parkingInfoList()
				}

			},
			getApi2() {
				this.getfloorStatus()
				this.getfloorlockList()
				this.occupancyByTime(1);
				this.occupancyByTimeBar(1);
				this.occupancyByDay(1);
				this.durationDistribution();
				this.getParkingRecordList()
				if (this.parkingId == "") {

				} else {

				}
			},
			change1companyList(i) {
				//this.companyListIndex=i
				var companyId = ""

				if (i == -1) {
					if (this.companyId == companyId) {

					} else {
						this.companyId = ""
						this.parkingList = [];
						this.getApi1()
					}
				} else {
					var item = this.companyList[i]
					companyId = item.id
					if (this.companyId == companyId) {

					} else {
						this.companyId = companyId

						this.parkingId = "";
						this.current2 = 0;
						this.$refs.tabs2.showBar = true

						this.getApi1()
					}
				}

			},
			change2parkingList(i) {

				var parkingId = ""

				if (i == -1) {

					if (this.parkingId == parkingId) {

					} else {
						this.parkingId = "";
						this.getApi2()

					}
				} else {
					var item = this.parkingList[i]
					parkingId = item.id
					if (this.parkingId == parkingId) {

					} else {
						this.parkingId = parkingId;
						this.getApi2()
					}
				}

			},
			showselect2confirm(e) {

				this.change2parkingList(e[0])
			},
			utabsChange2other() {
				this.$refs.tabs2.showBar = false
				this.current2 = -1;
				this.showselect2 = true;
			},
			utabsChange2(index) {
				this.current2 = index;
				this.change2parkingList(index - 1)
				this.$refs.tabs2.showBar = true
			},

			showselect1confirm(e) {

				this.change1companyList(e[0])
			},

			utabsChange1other() {
				this.$refs.tabs.showBar = false
				this.current1 = -1;
				this.showselect1 = true;
			},
			utabsChange1(index) {
				this.current1 = index;
				this.change1companyList(index - 1)
				this.$refs.tabs.showBar = true
			},
			parkingInfoList() {

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.parkingList = [];

				API.parkingList({
					companyId: this.companyId,
					pageSize: 999
				}).then((response) => {

					uni.hideLoading();
					var parkingInfoList = response.data.parkingInfoList
					this.parkingList = [
						...parkingInfoList,
					];

					if (this.parkingList.length == 1) {

						this.change2parkingList(0)

					} else {
						this.change2parkingList(-1)
						this.getApi2()
					}

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

				})
			},
			companyInfoList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.companyList = [];

				API.companyInfoList({

				}).then((response) => {

					uni.hideLoading();
					var companyInfoList = response.data.companyInfoList
					this.companyList = [
						...companyInfoList,

					];

					if (this.companyList.length == 1) {
						this.change1companyList(0)
					} else {
						this.change1companyList(-1)
						this.getApi1()
					}


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

				})
			},
			init() {
				this.companyInfoList()

				//this.occupancyByTime();

				//this.getbody3()
				//this.getbody4()

				//this.getbody5()


			},
			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()
			},
			body5dataconfirm(e) {
				console.log(e)
				var date = new Date(e.year + "-" + e.month + "-" + e.day);
				this.body5data.query.queryDate = parseUnixTime(date, '{y}-{m}-{d}')
				this.body5data.vue.queryN = parseUnixTime(date, '{y}年{m}月{d}日');

				this.occupancyByDay()
			},
			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.companyId = this.companyId
				this.body3data.query.parkingId = this.parkingId
				API.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"
					})

				})
			},
			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.companyId = this.companyId
				this.body4data.query.parkingId = this.parkingId
				API.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"
					})

				})
			},
			occupancyByDay(init) {
				if (init) {
					var date = new Date();

					this.body5data.query.queryDate = parseUnixTime(date, '{y}-{m}-{d}')
					this.body5data.vue.queryN = parseUnixTime(date, '{y}年{m}月{d}日');

				}
				this.jpContentMap.body5 = 0
				this.body5data.query.companyId = this.companyId
				this.body5data.query.parkingId = this.parkingId
				API.occupancyByDay(
					this.body5data.query
				).then((response) => {
					this.body5data.data = [
						...response.data.locksTimeList,

					];

					if (this.body5data.data.length == 0) {
						this.jpContentMap.body5 = 1

					} else {
						this.jpContentMap.body5 = 2
						//this.getbody3()
						this.getbody5()
					}

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

				})
			},
			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.companyId = this.companyId
				this.body2data.query.parkingId = this.parkingId
				API.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"
					})

				})
			},
			getbody5() {
				// 颜色映射
				var colorMap = [

					'#FFA500',
					'#00FF00',
					'#F44336',
					'#E91E63',
					'#9C27B0',
					'#673AB7',
					'#3F51B5',
					'#2196F3',
					'#03A9F4',
					'#00BCD4',
					'#009688',
					'#CDDC39',
					'#FFEB3B',
					'#FFC107',
					'#FF9800',
					'#FF5722',
					'#795548',
					'#607D8B'
				];

				var key = "body5echart"
				var dataApi = this.body5data.data;

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

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

				}
				myChart.clear()
				var dataName = []
				var dataTime = []
				var series = []
				var i = 0;
				var isPush=false
				dataApi.forEach(item => {

					dataName.push(item.lockName)
					var itemList = []
					var j = 0
					item.timeUseList.forEach(item2 => {

						Object.keys(item2).forEach(key1 => {
							console.log(item2[key1])
							if (item2[key1]) {
								var ob = [j, i, i]
								itemList.push(ob)
								isPush=true
							} else {
								// var ob=[j,i,i]
								// itemList.push(ob)
							}
						});
						j += 1;

					})


					var obj = {
						tooltip: {
							trigger: 'item',
							axisPointer: {
								type: 'shadow'
							},
							formatter: function(params) {
								console.log(params)
								var result = params.marker+params.name +'点<br/>' + params.seriesName  + ' 占用 ';
								
								return result;
							}
						},
						//silent: true,
						type: 'custom',
						"name": item.lockName,
						// tooltip: {
						// 	//trigger: 'none',
						// 	show: false
						// },
						itemStyle: {
							color: colorMap[i % colorMap.length]
						},
						renderItem: function(params, api) {
							var xIndex = api.value(0); // x轴索引
							var yIndex = api.value(1); // y轴索引
							var value = api.value(2); // 值

							// 获取颜色
							var color = colorMap[value % colorMap.length] || '#ffffff';

							// 计算矩形的位置和大小
							var x = api.coord([xIndex, yIndex])[0];
							var y = api.coord([xIndex, yIndex])[1];
							var width = api.size([1, 0])[0];
							var height = api.size([0, 1])[1];

							return {
								type: 'rect',

								shape: {
									x: x - uni.upx2px(25),
									y: y - uni.upx2px(20),
									width: width,
									height: 20,
								},
								style: {
									fill: color
								}
							};
						},

					}
					obj.data = itemList
					series.push(obj)
					i += 1;

				})
				dataApi[0].timeUseList.forEach(item => {

					Object.keys(item).forEach(key1 => {
						dataTime.push(key1)
					});

				})

				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: 30 + head,
						left: -10+(isPush?0:20),
						right: 0,
						bottom: 0,
						containLabel: true
					},
					legend: {
						data: dataName
					},
					xAxis: {
						type: 'category',
						data: dataTime
					},
					yAxis: {
						type: 'category',

					},
					series: series
				};


				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

					}]
				};
				console.log(option)
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			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 = {
					legend: {},
					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;
			},
			getbody1pie1() {
				var img = require("@/assets/img/index/pie1-1.svg")
				var key = "body1pie1"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(88),
						height: uni.upx2px(88)
					})

				}
				myChart.clear()
				var option = {

					series: [{
						silent: true,
						type: 'pie',
						radius: ['70%', '100%'],
						label: {
							show: false,
						},

						data: [{
								value: this.body1data.data.useNum,
								itemStyle: {
									color: '#AAAAAA'
								}
							},
							{
								value: this.body1data.data.idleNum,
								itemStyle: {
									color: '#53B56B'
								}
							}
						]
					}],
					grid: {
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					graphic: [{
						type: 'image',
						id: 'logo',
						left: 'center',
						top: 'center',
						style: {
							image: img, // 图片路径
							width: uni.upx2px(40),
							height: uni.upx2px(40)
						}
					}]
				}
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody1pie2() {
				var img = require("@/assets/img/index/pie1-2.svg")

				var key = "body1pie2"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(88),
						height: uni.upx2px(88)
					})

				}
				myChart.clear()
				var option = {

					series: [{
						silent: true,
						type: 'pie',
						radius: ['70%', '100%'],
						label: {
							show: false,
						},

						data: [{
								value: this.body1data.data.loseNum,
								itemStyle: {
									color: '#AAAAAA'
								}
							},
							{
								value: this.body1data.data.normalNum,
								itemStyle: {
									color: '#53B56B'
								}
							},
							{
								value: this.body1data.data.errorNum,
								itemStyle: {
									color: '#EF8132'
								}
							}
							//, {
							// 	value: 735,
							// 	itemStyle: {
							// 		color: '#DC4441'
							// 	}
							// }
						]
					}],
					grid: {
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					graphic: [{
						type: 'image',
						id: 'logo',
						left: 'center',
						top: 'center',
						style: {
							image: img, // 图片路径
							width: uni.upx2px(40),
							height: uni.upx2px(40)
						}
					}]
				}

				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},
			getbody1pie3() {
				var img = require("@/assets/img/index/pie1-3.svg")

				var key = "body1pie3"
				var myChart = this.echartsList[key];
				if (!myChart) {
					myChart = echarts.init(document.getElementById(key), null, {
						width: uni.upx2px(88),
						height: uni.upx2px(88)
					})

				}
				myChart.clear()
				var option = {

					series: [{
						type: 'pie',
						silent: true, // 禁用交互效果

						radius: ['70%', '100%'],
						label: {
							show: false,
						},

						data: [{
								value: 735,
								itemStyle: {
									color: '#53B56B'
								}
							},
							{
								value: 735,
								itemStyle: {
									color: '#EF8375'
								}
							},
							{
								value: 735,
								itemStyle: {
									color: '#307AF6'
								}
							}
						]
					}],
					grid: {
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					graphic: [{
						type: 'image',
						id: 'logo',
						left: 'center',
						top: 'center',
						style: {
							image: img, // 图片路径
							width: uni.upx2px(40),
							height: uni.upx2px(40)
						}
					}]
				}
				myChart.setOption(option);
				this.echartsList[key] = myChart;
			},

			getfindByOpenId() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByOpenId({
					openId: this.jphelp.getOpenId(),
				}).then((response) => {

					uni.hideLoading();
					this.isReady = true;
					this.loginset(response)
					try {
						this.init()
					} catch (e) {

						uni.showToast({
							title: e,
							icon: "none"
						})
					}

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
					uni.redirectTo({
						url: '/pages/login/login'
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.color307AF6 {
		color: #307AF6
	}

	.color53B56B {
		color: #53B56B
	}

	.colorAAAAAA {
		color: #AAAAAA
	}

	.colorEF8132 {
		color: #EF8132
	}

	.colorDC4441 {
		color: #DC4441
	}

	.colorEF8375 {
		color: #EF8375
	}

	.body1pie-table {
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-weight: bold;

		.tr {
			.td1 {
				padding-right: 24rpx;
			}

			display: flex;
			margin-bottom: 40rpx;

			.td2 {

				width: 100%;

				.td3 {
					display: flex;

					.td4 {
						width: 120px;
					}
				}
			}
		}

		// td{
		// 	padding-right: 24rpx;

		// }
		.body1pie {}

		.body1pie-num {
			margin: 0 8rpx;
		}
	}

	// 导航栏
	.navbar {

		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
		background-color: rgba(22, 119, 255, 1);
		color: #fff;
		line-height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999999;
		font-weight: bold;

	}

	.main {
		border-radius: 16px 16px 0px 0px;
		background: linear-gradient(180deg, rgba(242, 244, 246, 1) 61%, rgba(255, 255, 255, 0) 100%);
		margin-top: -24rpx;
		padding: 32rpx;

		.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;
					font-weight: 400;
				}
			}
		}

		.statistics-end {
			padding-bottom: 0;
		}
	}

	.tabs-box2 {
		margin-bottom: 8rpx;
		padding-right: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tabs-box-other {
			padding-bottom: 12rpx;

		}
	}

	.tabs-box {
		padding: 42rpx 0;
		margin-top: 66rpx;
		padding-right: 32rpx;
		background-color: rgba(22, 119, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tabs {
			width: 97%;
		}

		.more {
			padding-right: 12rpx;
		}

		.tabs-box-other {
			padding-bottom: 12rpx;
			height: 80rpx;
			line-height: 70rpx;
			font-size: 30rpx;
			color: rgb(255, 255, 255);
		}

	}

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

	.body7main {
		border-radius: 4px;
		background-color: rgba(245, 245, 245, 1);
		padding: 32rpx;

		.line {
			display: flex;
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;
			.goto{
				    display: flex;
				    align-items: center;
			}
			.item-body{
				font-size: 24rpx;
			}
			
			.item-title {
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
				    display: flex;
				    align-items: center;
					.item-name{
						margin-right: 8rpx;
						font-size: 32rpx;
						font-weight: bold;
					}
			}
			.statusN{
				border-radius: 4px;
				font-size: 24rpx;
				padding: 2rpx 8rpx;
				margin-right: 8rpx;
			}
			.statusN1 {
				
				color: rgba(0,185,98,1);
				border: 1px solid rgba(0,185,98,1);
			
			}
			
			.statusN0 {
				color: rgba(51,51,51,1);
				border: 1px solid rgba(119,119,119,1);
			
			}
			.item-tags {
				display: flex;

				.tag {
					border-radius: 4px;
					white-space: pre;
					background-color: rgba(39, 177, 72, 1);
					color: rgba(255, 255, 255, 1);
					font-size: 20rpx;
					padding: 2rpx 8rpx;
					margin-right: 8rpx;
				}

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

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

				

				.lockStatus {

					background-color: rgba(153, 153, 153, 1);
				}
				.lockStatus2 {
					background-color: #ff7b00
				}
				.lockStatus1 {
					background-color: #03A9F4
				}
				
				.lockStatus3 {
					background-color: #27b148
				}
			}
		}
	}
	
	
	.body8main{
		
		.line{
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
				background: #fff;
				padding:16rpx 0rpx;
				border-top: 1px solid rgba(232,232,232,1);
				.data{
					.view1{
						color: rgba(16,16,16,1);
						font-size: 32rpx;
						font-weight: bold;
					}
					.view3{
						color: rgba(119,119,119,1);
						font-size: 28rpx;
					}
				}
				.goto{
					display: flex;
					font-size: 32rpx;
	
				}
				.status1{
					color:#FF5100 
				}
				.status2{
					color: rgba(22,119,255,1);
	 
				}
			
		}
		.line:first-child{
			border-top: 0px ;
			    padding-top: 0px;
		}
	}
</style>