|
|
|
<template>
|
|
|
|
<div class="progress-box">
|
|
|
|
<!-- 绘制圆环背景 -->
|
|
|
|
<canvas ref="canvasProgressbg" class="progress-bg" id="canvasProgressbg" width="280" height="280" />
|
|
|
|
<!-- 绘制加载中圆弧 -->
|
|
|
|
<canvas ref ="canvasProgress" class="progress-canvas" id="canvasProgress" width="280" height="280" />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {mapState} from 'vuex';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'income-circle',
|
|
|
|
props: {
|
|
|
|
data: {
|
|
|
|
type: Object,
|
|
|
|
default: {}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState({
|
|
|
|
radio: (state) => {
|
|
|
|
return (state.yoho.window.clientWidth/750).toFixed(2);
|
|
|
|
},
|
|
|
|
// summary:(state) => {
|
|
|
|
// return {
|
|
|
|
// goodsIncome: state.home.mine.assetData.goodsIncome,
|
|
|
|
// totalIncome: state.home.mine.assetData.totalIncome,
|
|
|
|
// compensateIncome: state.home.mine.assetData.compensateIncome
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
// console.log(typeof this.data.compensateIncome)
|
|
|
|
|
|
|
|
|
|
|
|
let summary = {}
|
|
|
|
// console.log(this.goodsIncome)
|
|
|
|
// console.log(summary)
|
|
|
|
// console.log('---------')
|
|
|
|
// console.log(this.data)
|
|
|
|
summary.compensateIncome = '299.26';
|
|
|
|
summary.goodsIncome = '955.78';
|
|
|
|
summary.totalIncome = '1255.04';
|
|
|
|
|
|
|
|
this.drawProgressbg(summary);
|
|
|
|
this.startProgress(summary);
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
// 画progress底部背景
|
|
|
|
drawProgressbg: function (summary) {
|
|
|
|
var c=document.getElementById("canvasProgressbg");
|
|
|
|
var ctx=c.getContext("2d");
|
|
|
|
ctx.lineWidth= 28 ;
|
|
|
|
let strokeStyle = '#E0E0E0'
|
|
|
|
if (summary && summary.totalIncome > 0) {
|
|
|
|
strokeStyle = '#65AB85';
|
|
|
|
}
|
|
|
|
ctx.strokeStyle=strokeStyle;
|
|
|
|
ctx.lineCap='round'
|
|
|
|
ctx.beginPath();
|
|
|
|
//设置一个原点(110,110)，半径为100的圆的路径到当前路径
|
|
|
|
console.log("起始点：" + Math.PI)
|
|
|
|
ctx.arc(120, 120, 100, 0, 2 * Math.PI, false);
|
|
|
|
ctx.stroke();
|
|
|
|
//开始绘制
|
|
|
|
// ctx.draw();
|
|
|
|
},
|
|
|
|
|
|
|
|
// 画progress进度
|
|
|
|
drawCircle: function (step) {
|
|
|
|
var c=document.getElementById("canvasProgress");
|
|
|
|
var context=c.getContext("2d");
|
|
|
|
context.lineWidth=28;
|
|
|
|
let strokeColor = '#002B47'
|
|
|
|
context.strokeStyle=strokeColor;
|
|
|
|
context.lineCap='round';
|
|
|
|
context.beginPath();
|
|
|
|
//参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
|
|
|
|
context.arc(120, 120, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
|
|
|
|
context.stroke();
|
|
|
|
//开始绘制
|
|
|
|
// context.draw()
|
|
|
|
},
|
|
|
|
|
|
|
|
// 开始progress
|
|
|
|
|
|
|
|
startProgress: function (summary) {
|
|
|
|
if (summary && summary.totalIncome > 0) {
|
|
|
|
this.drawCircle(summary.goodsIncome / (summary.totalIncome / 2))
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.progress-box {
|
|
|
|
position: absolute;
|
|
|
|
top: 50px;
|
|
|
|
right: 50px;
|
|
|
|
width: 280px;
|
|
|
|
height: 280px;
|
|
|
|
}
|
|
|
|
.progress-bg {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.progress-canvas {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
