novelAD/pages/tools/shouJiQingLi.vue

<template>
	<view class="content">
		<view class="flex w ai_center jc_center fd_c mgt-20">
			<!-- <qiun-data-charts
				  style="width: 360rpx;height: 360rpx;"
			      type="arcbar"
			      :opts="opts"
			      :chartData="chartData"
			    /> -->
			<iCircle
				:percent="percent"
				:size="350"
				stroke-color="#44ebd9"
				BgId="BgId1"
				InId="InId1"
				trailWidth="30"
				strokeWidth="30"
				trailColor="#d0effd"
			>
				<text  style="font-size:48rpx; color: #333;font-weight: bold;">{{ percent }}%</text>
				<view slot="canvas">
					<canvas
						class="CanvasBox strokeCanvas"
						canvas-id="BgId1"
					></canvas>
					<canvas
						class="CanvasBox trailCanvas"
						canvas-id="InId1"
					></canvas>
				</view>
			</iCircle>
			<view class="text-24 mgt-20">发现大量垃圾</view>
			<view class="text-888 text-22 mgt-20">占用大量手机内存，急需清理</view>
			<view class="mgt-50 clean_btn cursor" @click="sureClean">
				{{ status?'正在清理中':'立即清理' }}
			</view>
		</view>
		<view class="w bg-white h-320 mgt-80 radio-30 pd-20">
			<view v-for="(i,key) in info" class="bg-eee h-80 radio-20 mgb-20 flex jc_between ai_center pdx-20">
				<view>
					<i v-if="key == '剩余内存'" style="color: #42aa87;" class="fas fa-rocket"></i>
					<i v-else-if="key == '总计内存'" style="color: #42aa87;" class="fas fa-file"></i>
					<i v-else-if="key == '已使用'" style="color: #42aa87;" class="fas fa-pie-chart"></i>
					&nbsp; {{ key }}
				</view>
				<view class="" style="color: #42aa87;">
					{{ i }}GB
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import iCircle from '@/components/xiaoran-circle/xiaoran-circle.vue';
onMounted(()=>{
	getServerData();
})
const info = ref({
	'剩余内存':20.99,
	'总计内存': 50.12,
	'已使用':29.13,
})
const percent = ref(0)
const status = ref(false)
var timer = null
const sureClean = ()=>{
	if(status.value) return
	status.value = !status.value
	if(status.value){
		timer = setInterval(() => {
			if(percent.value < 100){
				let num = Math.ceil(Math.random()*3) 
				percent.value += percent.value + num > 100 ? 1 : num
			}else{
				clearInterval(timer)
				percent.value = 0
				status.value = false
			}
		}, 200)
	}else{
		percent.value = 0
	}
}
const chartData = ref({
	
})
const opts = ref({
	 color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	padding: undefined,
	title: {
	  name: "80%",
	  fontSize: 35,
	  color: "#000"
	},
	subtitle: {
	  name: "",
	  fontSize: 25,
	  color: "#666666"
	},
	extra: {
	  arcbar: {
		type: "circle",
		width: 14,
		backgroundColor: "#cfeffc",
		startAngle: 1.5,
		endAngle: 0.25,
		gap: 2
	  }
	},
	background:'rgba(0,0,0,1)',
})
const getServerData = () => {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            series: [
              {
                name: "",
                color: "#3ceedc",
                data: 0.8
              }
            ]
          };
        chartData.value = JSON.parse(JSON.stringify(res));
      }, 50);
    }
</script>

<style lang="scss" scoped>
	.content{
		height: 100vh;
		padding: 28rpx;
		background: linear-gradient(to bottom, #a5eed0, #dcefaf);
		.clean_btn{
			width: 400rpx;
			text-align: center;
			background: #fff;
			height: 80rpx;
			line-height: 80rpx;
			color: #42aa87;
			border-radius: 40rpx;
			border: 1rpx solid;
		}
	}
	.CanvasBox {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
</style>