1
|
<template>
|
1
|
<template>
|
2
|
<div class="progress-box">
|
2
|
<div class="progress-box">
|
3
|
<!-- 绘制圆环背景 -->
|
3
|
<!-- 绘制圆环背景 -->
|
4
|
- <canvas ref="canvasProgressbg" class="progress-bg" id="canvasProgressbg" width="280" height="280" />
|
4
|
+ <canvas ref="canvasProgressbg" class="progress-bg" id="canvasProgressbg" width="240" height="240" />
|
5
|
<!-- 绘制加载中圆弧 -->
|
5
|
<!-- 绘制加载中圆弧 -->
|
6
|
- <canvas ref ="canvasProgress" class="progress-canvas" id="canvasProgress" width="280" height="280" />
|
6
|
+ <canvas ref ="canvasProgress" class="progress-canvas" id="canvasProgress" width="240" height="240" />
|
7
|
</div>
|
7
|
</div>
|
8
|
</template>
|
8
|
</template>
|
9
|
|
9
|
|
|
@@ -16,7 +16,8 @@ export default { |
|
@@ -16,7 +16,8 @@ export default { |
16
|
data: {
|
16
|
data: {
|
17
|
type: Object,
|
17
|
type: Object,
|
18
|
default: {}
|
18
|
default: {}
|
19
|
- }
|
19
|
+ },
|
|
|
20
|
+
|
20
|
},
|
21
|
},
|
21
|
data() {
|
22
|
data() {
|
22
|
return {
|
23
|
return {
|
|
@@ -25,32 +26,21 @@ export default { |
|
@@ -25,32 +26,21 @@ export default { |
25
|
},
|
26
|
},
|
26
|
computed: {
|
27
|
computed: {
|
27
|
...mapState({
|
28
|
...mapState({
|
28
|
- radio: (state) => {
|
|
|
29
|
- return (state.yoho.window.clientWidth/750).toFixed(2);
|
29
|
+ clientWidth: (state) => {
|
|
|
30
|
+ return state.yoho.window.clientWidth;
|
30
|
},
|
31
|
},
|
31
|
- // summary:(state) => {
|
|
|
32
|
- // return {
|
|
|
33
|
- // goodsIncome: state.home.mine.assetData.goodsIncome,
|
|
|
34
|
- // totalIncome: state.home.mine.assetData.totalIncome,
|
|
|
35
|
- // compensateIncome: state.home.mine.assetData.compensateIncome
|
|
|
36
|
- // }
|
|
|
37
|
- // },
|
|
|
38
|
})
|
32
|
})
|
39
|
},
|
33
|
},
|
40
|
|
34
|
|
41
|
mounted() {
|
35
|
mounted() {
|
42
|
- // console.log(typeof this.data.compensateIncome)
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
let summary = {}
|
36
|
let summary = {}
|
46
|
- // console.log(this.goodsIncome)
|
|
|
47
|
- // console.log(summary)
|
|
|
48
|
- // console.log('---------')
|
|
|
49
|
- // console.log(this.data)
|
|
|
50
|
- summary.compensateIncome = '299.26';
|
|
|
51
|
- summary.goodsIncome = '955.78';
|
|
|
52
|
- summary.totalIncome = '1255.04';
|
|
|
53
|
-
|
37
|
+ for(let key in this.data) {
|
|
|
38
|
+ let item = this.data[key];
|
|
|
39
|
+ if(item.includes('¥')) {
|
|
|
40
|
+ let value = this.data[key].split('¥')[1];
|
|
|
41
|
+ summary[key] = value
|
|
|
42
|
+ }
|
|
|
43
|
+ }
|
54
|
this.drawProgressbg(summary);
|
44
|
this.drawProgressbg(summary);
|
55
|
this.startProgress(summary);
|
45
|
this.startProgress(summary);
|
56
|
},
|
46
|
},
|
|
@@ -58,8 +48,8 @@ export default { |
|
@@ -58,8 +48,8 @@ export default { |
58
|
methods: {
|
48
|
methods: {
|
59
|
// 画progress底部背景
|
49
|
// 画progress底部背景
|
60
|
drawProgressbg: function (summary) {
|
50
|
drawProgressbg: function (summary) {
|
61
|
- var c=document.getElementById("canvasProgressbg");
|
|
|
62
|
- var ctx=c.getContext("2d");
|
51
|
+ let c=document.getElementById("canvasProgressbg");
|
|
|
52
|
+ let ctx=c.getContext("2d");
|
63
|
ctx.lineWidth= 28 ;
|
53
|
ctx.lineWidth= 28 ;
|
64
|
let strokeStyle = '#E0E0E0'
|
54
|
let strokeStyle = '#E0E0E0'
|
65
|
if (summary && summary.totalIncome > 0) {
|
55
|
if (summary && summary.totalIncome > 0) {
|
|
@@ -69,7 +59,6 @@ export default { |
|
@@ -69,7 +59,6 @@ export default { |
69
|
ctx.lineCap='round'
|
59
|
ctx.lineCap='round'
|
70
|
ctx.beginPath();
|
60
|
ctx.beginPath();
|
71
|
//设置一个原点(110,110),半径为100的圆的路径到当前路径
|
61
|
//设置一个原点(110,110),半径为100的圆的路径到当前路径
|
72
|
- console.log("起始点:" + Math.PI)
|
|
|
73
|
ctx.arc(120, 120, 100, 0, 2 * Math.PI, false);
|
62
|
ctx.arc(120, 120, 100, 0, 2 * Math.PI, false);
|
74
|
ctx.stroke();
|
63
|
ctx.stroke();
|
75
|
//开始绘制
|
64
|
//开始绘制
|
|
@@ -78,8 +67,8 @@ export default { |
|
@@ -78,8 +67,8 @@ export default { |
78
|
|
67
|
|
79
|
// 画progress进度
|
68
|
// 画progress进度
|
80
|
drawCircle: function (step) {
|
69
|
drawCircle: function (step) {
|
81
|
- var c=document.getElementById("canvasProgress");
|
|
|
82
|
- var context=c.getContext("2d");
|
70
|
+ let c=document.getElementById("canvasProgress");
|
|
|
71
|
+ let context=c.getContext("2d");
|
83
|
context.lineWidth=28;
|
72
|
context.lineWidth=28;
|
84
|
let strokeColor = '#002B47'
|
73
|
let strokeColor = '#002B47'
|
85
|
context.strokeStyle=strokeColor;
|
74
|
context.strokeStyle=strokeColor;
|