<template>
	<view class="page">
		<u-navbar :is-back="false"  title="首页" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='36'
			id="navbar">
		</u-navbar>
		<view class="zhuhu" v-if="false">
			<view class="card1">
				<view class="top">
					<view class="left">
						设备
					</view>
					<view class="right">
						<image class="img1" src="@/static/off.png" mode="" style="margin-right: 30rpx;"></image>
						<image class="img1" src="@/static/share.png" mode=""></image>
					</view>
				</view>
				<view class="mid">
					<view class="mid_left">
						<image src="../../static/db.png" mode=""></image>
					</view>
					<view class="mid_right">
						<view class="mid_top">
							2501号
						</view>
						<view class="mid_bot">
							<view class="txt">电表号：32562365BD253</view>
							<div class="tip">在线</div>
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="bot_left">
						<view class="echarts">
							
							<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
							<l-echart ref="chart" @finished="initChart"></l-echart>
						</view>
					</view>
					<view class="bot_right">
						<view class="cont">
							<view class="tit">
								150KWH
							</view>
							<view class="txt">
								总电量
							</view>
						</view>
						<view class="cont" style="margin-left: 60rpx;">
							<view class="tit">
								0.5元/度
							</view>
							<view class="txt">
								电价
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card2">
				<view class="tit">实时</view>
				<view class="cont_box">
					<view class="cont">
						<view class="top">1.5KW</view>
						<view class="bot">实时功率</view>
					</view>
					<view class="cont" style="width: 70rpx;">
						<view class="top">43A</view>
						<view class="bot">电流</view>
					</view>
					<view class="cont">
						<view class="top">220V</view>
						<view class="bot">电压</view>
					</view>
					
				</view>
			</view>
			<view class="card3">
				<view class="tit">其他</view>
				<view class="cont_box">
					<view class="cont">
						<view class="top">
							<image src="@/static/sz.png" mode=""></image>
						</view>
						<view class="bot">其他设置</view>
					</view>
					<view class="cont" style="width: 58rpx;">
						<view class="top">
							<image src="@/static/yc.png" mode="" style="width: 58rpx;height: 60rpx;"></image>
						</view>
						<view class="bot">异常</view>
					</view>
					<view class="cont">
						<view class="top">
							<image src="@/static/fx.png" mode=""></image>
						</view>
						<view class="bot">用电分析</view>
					</view>
					
				</view>
			</view>
			<view class="button">电费充值</view>
			<view class="zhanwei" style="width: 100%;height: 300rpx;">
				
			</view>
		</view>
		<view class="fd">
			
		</view>
		<tab-bar :indexs='0'></tab-bar>
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
			}
		},
		methods: {
			async initChart() {
		let value = 100;
		let value2=552.03
		const option = {
		    // backgroundColor:"#061740",
		    title: {
		        show: false,
		        text: `历史请求满意度`,  // 图表标题
		        x: 'center',
		        y: '20',
		        textStyle: {
		            color: '#333', //'#fff',
		            fontSize: 20,
		        },
		    },
		    series: [
		        {
		            type: 'pie',  // 饼图类型
		            radius: ['98%', '70%'],  // 饼图半径，第一个值是内半径，第二个值是外半径
		            silent: true,
		            clockwise: true,
		            startAngle: 90,  // 起始角度
		            z: 0,
		            zlevel: 0,
		
		            data: [
		                {
		                    value: value,
		                    name: '占比',  // 数据项名称
		                    itemStyle: {
		                        normal: {
		                            color: '#8883F0',  // 数据项颜色
		                        },
		                    },
		                    label: {
		                        normal: {
		                            position: 'center',
		                            formatter: ` {a|${value2}}\n\n{b|剩余电量}`,  // 标签内容格式
		                            rich: {
		                                a: {
		                                    fontSize: 15,
		                                    fontWeight: '700',
		                                    color: '#333',
		                                },
		                                b: {
		                                    fontSize: 11,
		                                    color: '#888',
		                                },
		                            },
		                        },
		                    },
		                },
		                {
		                    value: 100 - value,
		                    name: '',
		                    label: {
		                        normal: {
		                            show: false,
		                        },
		                    },
		                    itemStyle: {
		                        normal: {
		                            color: '#173164',
		                        },
		                    },
		                },
		            ],
		        },
		        {
		            type: 'gauge',  // 仪表盘类型
		            radius: '130%',  // 仪表盘半径，占图表容器的百分比
		            center: ['50%', '50%'],  // 仪表盘中心位置
		            startAngle: 359,
		            endAngle: 359.9,
		            splitNumber: 2,  // 刻度分割段数
		            hoverAnimation: true,
		            axisTick: {
		                show: true,  // 是否显示刻度线
		                length: 10,  // 刻度线长度
		                lineStyle: {
		                    color: 'auto',
		                    width: 1,
		                },
		            },
		            splitLine: {
		                length: 0,  // 刻度线分隔线长度
		                lineStyle: {
		                    width: 1,
		                    color: '#061740',
		                },
		            },
		            axisLabel: {
		                show: false,  // 是否显示刻度标签
		            },
		            pointer: {
		                show: false,  // 是否显示指针
		            },
		            axisLine: {
		                lineStyle: {
		                    opacity: 0,
		                },
		            },
		            detail: {
		                show: false,  // 是否显示仪表盘详情
		            },
		            data: [
		                {
		                    value: 0,
		                    name: '',
		                },
		            ],
		        },
		    ],
		};

				// console.log( this.$refs.chartRef,'1111');
				const chart = await this.$refs.chart.init(echarts);
				console.log(option);
				chart.setOption(option)
				// chart.resize({
				//     width: uni.upx2px(210),  // Convert 210rpx to pixels
				//     height: uni.upx2px(190.14)  // Convert 190.14rpx to pixels
				// });
				return chart
			},
		
		}
	}
</script>

<style lang="scss">
page{
	background-color: F7FAFE;
}
.page{
	.zhuhu{
		margin-top: 20rpx;
		padding: 0 40rpx;
		.card1{
			padding: 34rpx 0 0 40rpx;
			width: 670rpx;
			height: 583rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(53,140,255,0.1);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			.top{
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				.left{
					font-size: 35rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #8883F0;
				}
				.right{
					margin-right: 56rpx;
					.img1{
						width: 76rpx;
						height: 76rpx;
					}
				}
			}
			.mid{
				margin-top: 54rpx;
				display: flex;
				flex-wrap: nowrap;
				align-content: flex-start;
				.mid_left{
					image{
						width: 37rpx;
						height: 98rpx;
					}
				}
				.mid_right{
					margin-left: 40rpx;
					display: flex;
					flex-wrap: wrap;
					.mid_top{
						width: 100%;
						font-size: 42rpx;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						color: #262B37;
					}
					.mid_bot{
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						.txt{
							font-size: 24rpx;
							font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
							font-weight: 400;
							color: #95989D;
						}
						.tip{
							display: flex;
							align-items: center;
							justify-content: center;
							margin-left: 19rpx;
							width: 38rpx;
							height: 23rpx;
							background: rgba(204,204,204,0);
							opacity: 1;
							border: 2rpx solid #8883F0;
							border-radius: 40rpx;
							font-size: 14rpx;
							font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
							font-weight: 400;
							color: #8883F0;
						}
					}
				}
			}
			.bot{
				margin-top: 83rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.bot_left{
					width: 210rpx;
					height: 190.14rpx;
					.echarts{
						width: 210rpx;
						height: 190.14rpx;
					}
				}
				.bot_right{
					// margin-top: 50rpx;
					display: flex;
					flex-wrap: nowrap;
					.cont{
						.tit{
							font-size: 28rpx;
							font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
							font-weight: 600;
							color: #262B37;
							line-height: 49rpx;
						}
						.txt{
							font-size: 24rpx;
							font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
							font-weight: 400;
							color: #262B37;
						}
					}
				}
			}
		}
		.card2{
			padding-top: 40rpx;
			margin-top: 24rpx;
			width: 670rpx;
			height: 254rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53,140,255,0.1);
			border-radius: 28rpx;
			.tit{
				margin-left: 40rpx;
				
				font-size: 35rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				color: #8883F0;
			}
			.cont_box{
				margin-top: 32rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-around;
				.cont{
					width: 110rpx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;
					.top{
						font-size: 32rpx;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						color: #262B37;
					}
					.bot{
						margin-top: 20rpx;
						font-size: 24rpx;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						color: #262B37;
					}
				}
			}
		}
		.card3{
			padding-top: 40rpx;
			margin-top: 24rpx;
			width: 670rpx;
			height: 318rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53,140,255,0.1);
			border-radius: 28rpx;
			.tit{
				margin-left: 40rpx;
				
				font-size: 35rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				color: #8883F0;
			}
			.cont_box{
				margin-top: 32rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-around;
				.cont{
					width: 112rpx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;
					.top{
						image{
							width: 56rpx;
							height: 56rpx;
						}
					}
					.bot{
						margin-top: 28rpx;
						font-size: 28rpx;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						color: #808080;
					}
				}
			}
		}
		.button{
			margin-left: 76rpx;
			margin-top: 178rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 520rpx;
			height: 104rpx;
			background: #8883F0;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			
			font-size: 32rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
</style>
