Compare commits
No commits in common. "cc4f0a9b67679c92e8f95c3a907e1c3b4a859a1c" and "c0e697ff962fd40be344a005bf38b6b28bd3126a" have entirely different histories.
cc4f0a9b67
...
c0e697ff96
|
|
@ -1,176 +0,0 @@
|
||||||
<template>
|
|
||||||
<view
|
|
||||||
class="circle-progress"
|
|
||||||
:style="{
|
|
||||||
width: widthPx + 'px',
|
|
||||||
height: widthPx + 'px',
|
|
||||||
backgroundColor: bgColor
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<!-- 有的不支持canvas-id属性，必须用id属性 -->
|
|
||||||
<canvas
|
|
||||||
class="canvas-bg"
|
|
||||||
:canvas-id="canvasId"
|
|
||||||
:id="canvasId"
|
|
||||||
:style="{
|
|
||||||
width: widthPx + 'px',
|
|
||||||
height: widthPx + 'px'
|
|
||||||
}"
|
|
||||||
></canvas>
|
|
||||||
<canvas
|
|
||||||
class="canvas"
|
|
||||||
:canvas-id="elId"
|
|
||||||
:id="elId"
|
|
||||||
:style="{
|
|
||||||
width: widthPx + 'px',
|
|
||||||
height: widthPx + 'px'
|
|
||||||
}"
|
|
||||||
></canvas>
|
|
||||||
<slot></slot>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'circle-progress',
|
|
||||||
props: {
|
|
||||||
// 圆环进度百分比值
|
|
||||||
percent: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
// 值在0到100之间
|
|
||||||
validator: val => {
|
|
||||||
return val >= 0 && val <= 100;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 圆环底色（灰色的圆环）
|
|
||||||
inactiveColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#ececec'
|
|
||||||
},
|
|
||||||
// 圆环激活部分的颜色
|
|
||||||
activeColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#009dff'
|
|
||||||
},
|
|
||||||
// 圆环线条的宽度，单位rpx
|
|
||||||
borderWidth: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 14
|
|
||||||
},
|
|
||||||
// 整个圆形的宽度，单位rpx
|
|
||||||
width: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 200
|
|
||||||
},
|
|
||||||
// 整个圆环执行一圈的时间，单位ms
|
|
||||||
duration: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 1500
|
|
||||||
},
|
|
||||||
// 圆环进度区域的背景色
|
|
||||||
bgColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#ffffff'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
canvasId: this.randomId(), //一个页面多个圆形进度
|
|
||||||
elId: this.randomId(),
|
|
||||||
widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
|
|
||||||
borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
|
|
||||||
startAngle: -Math.PI / 2, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
|
|
||||||
progressContext: null, // 活动圆的canvas上下文
|
|
||||||
newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
|
|
||||||
oldPercent: 0 // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
percent(nVal, oVal = 0) {
|
|
||||||
if (nVal > 100) nVal = 100;
|
|
||||||
if (nVal < 0) oVal = 0;
|
|
||||||
this.newPercent = nVal;
|
|
||||||
this.oldPercent = oVal;
|
|
||||||
setTimeout(() => {
|
|
||||||
this.drawCircleByProgress(oVal);
|
|
||||||
}, 50);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// 赋值，用于加载后第一个画圆使用
|
|
||||||
this.newPercent = this.percent;
|
|
||||||
this.oldPercent = 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.drawProgressBg();
|
|
||||||
this.drawCircleByProgress(this.oldPercent);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//一个页面多个progress时ID需不同
|
|
||||||
randomId(){
|
|
||||||
return 'progressId'+parseInt(Math.random()*1000000)
|
|
||||||
},
|
|
||||||
drawProgressBg() {
|
|
||||||
let ctx = uni.createCanvasContext(this.canvasId, this);
|
|
||||||
ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度
|
|
||||||
ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
|
|
||||||
ctx.beginPath(); // 开始描绘路径
|
|
||||||
let radius = this.widthPx / 2;
|
|
||||||
ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
|
|
||||||
ctx.stroke(); // 对路径进行描绘
|
|
||||||
ctx.draw();
|
|
||||||
},
|
|
||||||
drawCircleByProgress(progress) {
|
|
||||||
let ctx = this.progressContext;
|
|
||||||
if (!ctx) {
|
|
||||||
ctx = uni.createCanvasContext(this.elId, this);
|
|
||||||
this.progressContext = ctx;
|
|
||||||
}
|
|
||||||
// 表示进度的两端为圆形
|
|
||||||
ctx.setLineCap('round');
|
|
||||||
// 设置线条的宽度和颜色
|
|
||||||
ctx.setLineWidth(this.borderWidthPx);
|
|
||||||
ctx.setStrokeStyle(this.activeColor);
|
|
||||||
// 计算过渡时间
|
|
||||||
let time = Math.floor(this.duration / 200);
|
|
||||||
let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
|
|
||||||
ctx.beginPath();
|
|
||||||
// 半径为整个canvas宽度的一半
|
|
||||||
let radius = this.widthPx / 2;
|
|
||||||
ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
|
|
||||||
ctx.stroke();
|
|
||||||
ctx.draw();
|
|
||||||
// 增大了百分比
|
|
||||||
if (this.newPercent > this.oldPercent) {
|
|
||||||
progress++;
|
|
||||||
if (progress > this.newPercent) return;
|
|
||||||
} else {
|
|
||||||
// 减少百分比
|
|
||||||
progress--;
|
|
||||||
if (progress < this.newPercent) return;
|
|
||||||
}
|
|
||||||
setTimeout(() => {
|
|
||||||
// 定时器，为了让进度条有动画效果
|
|
||||||
this.drawCircleByProgress(progress);
|
|
||||||
}, time);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.circle-progress {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.canvas-bg {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.canvas {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -34,14 +34,7 @@
|
||||||
<!-- 预约及时率、上门准时率、项目报修率 -->
|
<!-- 预约及时率、上门准时率、项目报修率 -->
|
||||||
<view class="disja mar-s20">
|
<view class="disja mar-s20">
|
||||||
<view v-for="(item,index) in percentageList" :key="index" class="disjcac fc col3">
|
<view v-for="(item,index) in percentageList" :key="index" class="disjcac fc col3">
|
||||||
<!-- <cmd-progress type="circle" :percent="item.num" :width="60" :stroke-color="['#00a2e9','#e87c00','#0b56ec'][index]" :circleStrokeColor="['#c6e6f5','#f4dfc6','#c8d7f5'][index]" :strokeShape="'square'"></cmd-progress> -->
|
<cmd-progress type="circle" :percent="item.num" :width="60" :stroke-color="['#00a2e9','#e87c00','#0b56ec'][index]" :circleStrokeColor="['#c6e6f5','#f4dfc6','#c8d7f5'][index]" :strokeShape="'square'"></cmd-progress>
|
||||||
<arprogress :percent="item.num"
|
|
||||||
:inactiveColor="['#c6e6f5','#f4dfc6','#c8d7f5'][index]"
|
|
||||||
:activeColor="['#00a2e9','#e87c00','#0b56ec'][index]"
|
|
||||||
:borderWidth="7.8"
|
|
||||||
:width="120"
|
|
||||||
:duration="500"
|
|
||||||
bgColor="transparent"><text :style="{color: ['#00a2e9','#e87c00','#0b56ec'][index]}">{{item.num}}%</text></arprogress>
|
|
||||||
<view class="fon24 mar-s20">{{item.title}}</view>
|
<view class="fon24 mar-s20">{{item.title}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -67,9 +60,8 @@
|
||||||
import cmdProgress from '@/components/cmd-progress/cmd-progress.vue';
|
import cmdProgress from '@/components/cmd-progress/cmd-progress.vue';
|
||||||
// 底部组件
|
// 底部组件
|
||||||
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
||||||
import arprogress from '@/components/ar-circle-progress/index.vue'
|
|
||||||
export default {
|
export default {
|
||||||
components:{statusNavSlot,cmdProgress,'foot-tab' :footTabOne,arprogress},
|
components:{statusNavSlot,cmdProgress,'foot-tab' :footTabOne},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
newHeight: uni.getSystemInfoSync().statusBarHeight + 50,
|
newHeight: uni.getSystemInfoSync().statusBarHeight + 50,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue