novelAD/pages/tools/yiJianShengDian.vue

<template>
	<view class="content">
		<view class="box1">
			<view class="text-24 mgb-20">
				剩余电量
			</view>
			<view class="text-52 text-2283ee">
				{{ powerNum }}%
			</view>
			<view class="mgt-16 text-20 text-666">
				预计可用3小时0分钟
			</view>
			<view class="btn cursor" @click="savePower">
				立即省电 <text style="transform: scale(0.7);">▶</text>
			</view>
		</view>
		<view class="box2">
			<view class="title">能耗分析</view>
			<view class="statistics">
				 <qiun-data-charts 
				      type="column"
				      :opts="opts"
				      :chartData="chartData"
				    />
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
const powerNum = ref(90)
const chartData = ref({})
onShow(()=>{
	getServerData();
	// uni.vibrateLong({
	// 	success: function () {
	// 		console.log('success');
	// 	}
	// });
})
const opts = ref({
	color: ["#2ff8e8","#2fe3f4"],
	  padding: [15,15,0,5],
	  enableScroll: false,
	  dataLabel:false,
	  legend: {},
	  xAxis: {
	    disableGrid: true,
	  },
	  yAxis: {
		disabled:true,
	    data: [
	      {
	        min: 0
	      }
	    ]
	  },
	  extra: {
	    column: {
	      type: "group",
	      width: 20,
	      activeBgColor: "#000000",
	      activeBgOpacity: 0.08,
	      linearType: "custom",
	      seriesGap: 30,
	      linearOpacity: 0.5,
	      barBorderCircle: true,
	      customColor: []
	    }
	  }
})
const getServerData = ()=>{
	 //模拟从服务器获取数据时的延时
	      setTimeout(() => {
	        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
	        let res = {
	            categories: ["待机","上网","导航","影片","音乐","打电话",'游戏'],
	            series: [
	              {
	                name: "目标值",
	                data: [35,36,31,33,13,34,10]
	              }
	            ]
	          };
	        chartData.value = JSON.parse(JSON.stringify(res));
	      }, 50);
}
uni.getBatteryInfo({
  success: (res) => {
	  powerNum.value = res.level
  },
  fail:(err)=>{
  	console.log('err',err)
  }
})
// 立即省电
const savePower = ()=>{
	uni.showToast({
		title:'开启省电',
		icon:'none',
	})
}
</script>

<style lang="scss" scoped>
	.content{
		height: 100vh;
		background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
		padding: 28rpx;
		.box1{
			width: 100%;
			height: 300rpx;
			padding: 40rpx 30rpx 10rpx;
			border-radius: 30rpx;
			background: url('/static/image/index_banner.jpg') no-repeat;
			background-size: cover;
			position: relative;
			.btn{
				position: absolute;
				transform: translate(30%,0%);
				bottom: 10rpx;
				width: 400rpx;
				height: 68rpx;
				line-height: 68rpx;
				border-radius: 60rpx;
				text-align: center;
				color: #fff;
				background: linear-gradient(90deg, #03fedf, #2ed9fb);
			}
		}
		.box2{
			background-color: rgba(255,255,255,.6);
			margin-top: 40rpx;
			height: 600rpx;
			border-radius: 30rpx;
			padding: 50rpx 30rpx 20rpx;
			.statistics{
				margin-top: 20rpx;
				// height: 200rpx;
			}
		}
	}
</style>