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

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

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

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

		</view>
		<view class="main">


			<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="content">
					<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">5</span>台</view>
										<view class="td td4">占用<span class="body1pie-num colorAAAAAA">5</span>台</view>
									</view>
									<view class="td td3">
									
										<view class="td td4">公共车位<span class="body1pie-num colorEF8132">5</span>台</view>
										<view class="td td4">私家车位<span class="body1pie-num colorDC4441">5</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">5</span>台</view>
										<view class="td td4">离线<span class="body1pie-num colorAAAAAA">5</span>台</view>
									</view>
									<view  class="td td3" >
										
										<view class="td td4">故障<span class="body1pie-num colorEF8132">5</span>台</view>
										<view class="td td4">低电量<span class="body1pie-num colorDC4441">5</span>台</view>
									</view>
								</view>
							</view>
							
							<view  class="tr">
								<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>
		<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'

	export default {
		components: {
			Tabbar,
			jpContent
		},
		data() {
			return {
				isReady: false,
				echartsList: {

				},
				jpContentMap: {
					body1: 2
				}
			}
		},
		onLoad() {

		},
		onReady() {
			this.getfindByOpenId();
		},
		methods: {
			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: 1048,
								 itemStyle: { color: '#AAAAAA' }
							},
							{
								value: 735 ,
								 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: 1048,
								 itemStyle: { color: '#AAAAAA' }
							},
							{
								value: 735 ,
								 itemStyle: { color: '#53B56B' }
							},
							{
									value: 1048,
									 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;
			},
			init() {
				this.getbody1pie1()
				this.getbody1pie2()
				this.getbody1pie3()
			},
			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) {
						console.log(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;

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

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

				}

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

	.tabs-box {
		padding: 32rpx 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;
		}

	}
</style>