个人数量/总量*100=限制最大100%最小0%
个人数量/总量=限制最大为1最小0.001小数点后保留3位
<template>
<view>
<!-- #ifdef APP-VUE || H5 -->
<!-- <template>
<view style="position: relative;">
<view style="position: absolute;top: 50%;left: 25%;transform: translate(-50%,-50%);">
<text style="color: #526bf8;font-size: 22px;font-weight: bold;">{{percentage}}%</text>
<text style="display: block;font-size: 12px;color: #999;">已发放v值</text>
</view>
<!– circle –>
<svg width="120" height="120">
<circle fill="none" cx="60" cy="60" r="50" stroke="#EBEDF0" stroke-width="10" />
<path fill="none" d="M 60, 10 A 50, 50, 0, 0, 1, 60, 110 A 50, 50, 0, 0, 1, 60, 10" stroke="#526bf8"
stroke-width="10" :stroke-dasharray="circleDashArray" stroke-linecap="round" />
</svg>
</view>
</template>-->
<!-- #endif -->
<view class="ecologicalData-detailed" @click="btnJump('/user/pages/ecologicalAmount/index')">
<text class="iconfont icon-31daifahuo ecologicalData-detailed-icon"></text>
我的明细
</view>
<view class="ecologicalData-card">
<view class="ecologicalData-card-info">
<!-- #ifdef MP-WEIXIN -->
<!-- #endif -->
<template>
<view class="page-container">
<view>
<canvas canvas-id="arcbar" id="arcbar" class="charts"
:style="{'min-height': '80px','top': '-20px','left': '0px','width':cWidth2*pixelRatio+'px','height':cHeight2*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth2*(pixelRatio-1)/2+'px','margin-top':-cHeight2*(pixelRatio-1)/2+'px'}"></canvas>
</view>
</view>
</template>
</view>
<view class="ecologicalData-card-list">
<view class="ecologicalData-list-item" @click="btnPrompt('tixian')">
<view class="ecologicalData-item-text">
生态数据总v值释放额度
</view>
<text class="ecologicalData-item-num">
1,000,000,000
</text>
</view>
<view class="ecologicalData-list-item" @click="btnPrompt('jiesuan')">
<view class="ecologicalData-item-text issued">
已发放v值
</view>
<text class="ecologicalData-item-num" v-if="achievement.sumAchievement">
{{ achievement.sumAchievement }}
</text>
</view>
</view>
</view>
<view class="column">
<view class="column-info" @click="btnJump('/fince/pages/accountDetails/index')">
<image src="https://cdn.gsws.daheyuntech.com/upload/platform/companyLogo/20221010_724780.png"
class="column-info-icon"></image>
已获取v值
</view>
<text class="column-text">{{ achievement.achievement }}</text>
</view>
</view>
</template>
<script>
import uCharts from '../../../components/u-charts/u-charts.js';
var arcbar = null;
export default {
data() {
return {
//app
/*percentage: 10,
circleDashArray: '',
rectDashArray: '',
triangleDashArray: '',
points: '',*/
//wx
pixelRatio: 1,
cWidth2: '',//圆弧进度图
cHeight2: '',//圆弧进度图
arcbarWidth: '',
achievement: '',
progress: 0,
rate: {
sum: 100, // 总计
val: 80, //实际值
pre: 15,
valArr: 0,
canvas: "canvas",
},
};
},
/* mounted() {
// triangle
const height = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2)) // 三角形的高
this.points = `10,${height + 10} 60,10 110,${height + 10}`
this.setProgress()
},*/
async onShow() {
this.memberInfo = await this.$utils.memberInfo();
this.getAchievement()
/*this.Progressbar(this.rate);*/
},
onLoad() {
this.cWidth2 = uni.upx2px(240);//圆弧进度图
this.cHeight2 = uni.upx2px(340);//圆弧进度图
this.arcbarWidth = uni.upx2px(44);//圆弧进度图，进度条宽度,此设置可使各端宽度一致
/*let d = this.progress.toFixed(4);
console.log("d===",d);*/
var Arcbar2 = {series: [{data: this.progress, name: "已发放v值", color: "#526bf8"}]};
this.showArcbar("arcbar", Arcbar2);
},
methods: {
//app
setProgress() {
// circle
const girth = 2 * Math.PI * 50
this.circleDashArray = `${this.percentage * 0.01 * girth} ${girth}`
// rect
const circleGirth = 2 * Math.PI * 10 // 圆角的圆的周长
const width = 100 - 2 * 10 // 正方形的边长
const totalGirth = circleGirth + 4 * width // 圆角矩形总周长
this.rectDashArray = `${this.percentage * 0.01 * totalGirth} ${totalGirth}`
// triangle
const triangleGirth = 100 * 3
this.triangleDashArray = `${this.percentage * 0.01 * triangleGirth} ${triangleGirth}`
},
//wx
showArcbar(canvasId, chartData) {
console.log("show")
let _self = this;
arcbar = new uCharts({
$this: _self,
canvasId: canvasId,
type: 'arcbar',
fontSize: 11,
legend: false,
background: '#ffffff',
pixelRatio: _self.pixelRatio,
series: chartData.series,
animation: true,
width: _self.cWidth2 * _self.pixelRatio,
height: _self.cHeight2 * _self.pixelRatio,
dataLabel: true,
title: {
name: chartData.series[0].name,//显示文字
color: '#333333',
fontSize: 12 * _self.pixelRatio
},
subtitle: {
name: chartData.series[0].data * 100 + '%',//显示百分比
color: chartData.series[0].color,
fontSize: 18 * _self.pixelRatio
},
extra: {
arcbar: {
type: 'default',
width: _self.arcbarWidth * 0.4,//圆弧的宽度
}
}
});
console.log("subtitle===", arcbar);
},
getAchievement() {
this.$Request.get(this.$api.user.getAchievement).then(res => {
if (res.data.code === 1) {
this.achievement = res.data.data;
this.progress = (res.data.data.sumAchievement) / 1000000000;
console.log("this.progress", this.progress);
if (this.progress > 1) {
this.progress = 1;
} else if (this.progress < 0.001) {
this.progress = 0.001;
}
var Arcbar2 = {series: [{data: this.progress.toFixed(3), name: "已发放v值", color: "#526bf8"}]};
this.showArcbar("arcbar", Arcbar2);
console.log("res.data.data.sumAchievement", res.data.data.sumAchievement)
console.log("res.data.data.achievement", res.data.data.achievement)
console.log("res.data.data.sumAchievement", this.progress.toFixed(4));
}
}, err => {
console.log("err: ", err);
});
},
/*Progressbar(rate) {
//根据后台获取到的数据计算比例
let sum = canvas.sum == 0 ? 1 : canvas.sum; // 总计
let newVal = parseFloat(((canvas.val / sum) * 100).toFixed(0)); //展示概率
let val = parseFloat(((canvas.valArr / sum) * 2).toFixed(1)); //实际
const ctx = uni.createCanvasContext(canvas.canvas); //拿到canvas对象（自己的定义的canvas-id）
// 开始绘制第一条路径 总数 红色
ctx.beginPath(); // 开始绘制路径
ctx.arc(25, 25, 22, 0, 3 * Math.PI); // arc画圆
ctx.setStrokeStyle("#f2f2f2"); // 线条颜色
ctx.setLineWidth(5); // 线条宽度
ctx.stroke(); // 绘制成线条（fill()是填充为饼图）
// 开始绘制第二条路径 成交 橘色
ctx.beginPath();
ctx.arc(25, 25, 22, 0, val * Math.PI);
ctx.setStrokeStyle("#ff7400");
ctx.setLineWidth(5);
ctx.stroke();
// 填充字体-367
ctx.setFillStyle("#FF7400");
ctx.setFontSize(14);
ctx.setTextAlign("center");
ctx.fillText(newVal, 20, 25);
ctx.stroke();
// 填充字体-累计推荐
ctx.setFillStyle("#FF7400");
ctx.setFontSize(12);
ctx.fillText("%", 35, 25);
ctx.stroke();
// 填充字体
ctx.setFillStyle("#FF7400");
ctx.setFontSize(10);
ctx.fillText("完成率", 25, 35);
ctx.stroke();
// 渲染
ctx.draw();
//绘制动画效果
if (canvas.valArr < canvas.val) {
canvas.valArr = canvas.valArr + 5;
if (canvas.valArr > canvas.val) {
canvas.valArr = canvas.val;
return;
}
}
if (canvas.valArr <= canvas.val) {
setTimeout(() => {
this.Progressbar(canvas);
}, 20);
}
},*/
//跳转页面
btnJump(url) {
this.$utils.jump(url, 'navigateTo');
},
//提示
btnPrompt(cate) {
if (cate === 'tixian') {
uni.showToast({title: "已经提取，但是还未实际到账的总额", icon: "none"});
} else if (cate === 'jiesuan') {
uni.showToast({title: "本月,所有已经结算到余额的佣金", icon: "none"});
} else {
uni.showToast({title: "本月,所有已付款的订单佣金", icon: "none"});
}
},
}
}
</script>
<style scoped lang="scss">
@import '../../../common/css/mixins/index.scss';
@import '../../../common/css/iconfont.css';
.page-container {
position: relative;
}
.charts {
position: absolute;
width: 200 upx;
height: 800 upx;
}
.normal {
width: 200 upx;
height: 200 upx;
background-color: #00ff00;
}
.active {
background-color: #2C405A;
}
.ecologicalData-detailed {
padding: $uni-padding-xl;
text-align: $uni-text-align-right;
@include font($uni-font-size-base, $uni-color-black3);
overflow: hidden;
&-icon {
float: right;
}
}
page {
background: #f7f4f8;
}
.ecologicalData-bg {
@include width-height(50%, 50rpx*$hd);
background: $uni-bg-color-upgrade;
}
.ecologicalData-card {
position: relative;
margin: $uni-margin-xl $uni-margin-base $uni-margin-lg;
padding: $uni-padding-xl 25rpx*$hd;
border-radius: 12rpx*$hd;
background: $uni-bg-color-white;
@include display-flex;
&-info {
position: relative;
color: $uni-color-upgrade;
overflow: hidden;
width: 45%;
.ecologicalData-info-txt {
@include absolute-left-top(rpx(0), rpx(0));
font-size: $uni-font-size-base;
}
.ecologicalData-info-balance {
float: left;
margin-top: $uni-margin-xxl;
font-size: $uni-font-size-xxxl;
font-weight: bold;
}
}
&-list {
position: relative;
z-index: 100;
flex: 1;
//text-align: $uni-text-align-center;
.ecologicalData-list-item {
flex: none;
min-height: 53rpx*$hd;
&:not(:last-child) {
margin-bottom: $uni-margin-xl;
}
.ecologicalData-item-icon {
display: inline-block;
margin-left: $uni-margin-xs;
}
.ecologicalData-item-num {
margin-left: 20rpx*$hd;
@include font($uni-font-size-xxl, $uni-color-black1, bold);
}
.ecologicalData-item-text {
position: $uni-position-relative;
padding-left: $uni-padding-xl;
padding-bottom: $uni-padding-sm;
@include font($uni-font-size-smm, $uni-color-black3);
&::after {
content: '';
@include absolute-left-top(rpx(5), rpx(0));
@include width-height(rpx(10), rpx(10));
background: #5270f1;
border-radius: $uni-border-radius-circle;
}
}
.issued {
&::after {
background: #e1e5ff;
}
}
}
}
}
.ecologicalData-boxShadow {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.05);
}
.column {
@include flexContainer(row, nowrap, space-between, center, center);
margin: $uni-margin-base;
padding: $uni-padding-base;
background: $uni-bg-color-white;
border-radius: $uni-border-radius-lg;
@include font($uni-font-size-lg, $uni-color-base);
overflow: hidden;
&-info {
flex: none;
overflow: hidden;
&-icon {
float: left;
margin-right: $uni-margin-sm-base;
@include width-height(rpx(22), rpx(22));
}
}
&-text {
flex: 1;
text-align: $uni-text-align-right;
color: $uni-color-red1 !important;
}
}
</style>
