|
|
<template>
|
|
|
<view class="tm-propressRound d-inline-block">
|
|
|
<view class="tm-propressRound-text" :style="{
|
|
|
width:size+'px',
|
|
|
height:size+'px'
|
|
|
}">
|
|
|
<slot name="default" :value="value">
|
|
|
<text class="text-black" :class="[black?'text-white':'']">{{value}}%</text>
|
|
|
</slot>
|
|
|
</view>
|
|
|
<view class="tm-propressRound-rk">
|
|
|
<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
|
|
|
<canvas :canvas-id="cid" :id="cid"
|
|
|
:style="{
|
|
|
width:size+'px',
|
|
|
height:size+'px'
|
|
|
}"
|
|
|
type="2d"
|
|
|
></canvas>
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
|
|
|
<canvas :canvas-id="cid" :id="cid"
|
|
|
:style="{
|
|
|
width:size+'px',
|
|
|
height:size+'px'
|
|
|
}"
|
|
|
></canvas>
|
|
|
<!-- #endif -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* 环形进度条
|
|
|
* @property {Number} value = [] 默认0，推荐使用v-model赋值。value.sync等同。
|
|
|
* @property {Number} size = [] 默认100，圆环大小。
|
|
|
* @property {Number} line-width = [] 默认6，圆环线条宽。
|
|
|
* @property {Array} color = [] 默认['#FF9800','#E91E63','#FF5722']，激活颜色
|
|
|
* @property {String} bgcolor = [] 默认'#EEEEEE'，背景颜色
|
|
|
* @property {Boolea} semicircle = [] 默认 false，是否半圆
|
|
|
* @property {Function} input 变化时的值。
|
|
|
* @property {Function} change 变化时的值。
|
|
|
* @example <tm-propressRound v-model="checked"></tm-propressRound>
|
|
|
*/
|
|
|
export default {
|
|
|
name:"tm-propressRound",
|
|
|
model:{
|
|
|
prop:"value",
|
|
|
event:"input"
|
|
|
},
|
|
|
props:{
|
|
|
black:{
|
|
|
type:Boolean,
|
|
|
default:false
|
|
|
},
|
|
|
size:{
|
|
|
type:Number,
|
|
|
default:100
|
|
|
},
|
|
|
lineWidth:{
|
|
|
type:Number,
|
|
|
default:10
|
|
|
},
|
|
|
value:{
|
|
|
type:Number,
|
|
|
default:0
|
|
|
},
|
|
|
color:{
|
|
|
type:Array,
|
|
|
default:()=>{
|
|
|
return ['rgb(255,152,0)','rgb(233,30,99)','rgb(255,87,34)']
|
|
|
}
|
|
|
},
|
|
|
bgcolor:{
|
|
|
type:String,
|
|
|
default:'rgb(238,238,238)'
|
|
|
},
|
|
|
semicircle:{
|
|
|
type:Boolean|String,
|
|
|
default:false
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
ctx:null,
|
|
|
timid:null,
|
|
|
jishu:0,
|
|
|
cid:'fdd_psd',
|
|
|
is2d:false
|
|
|
};
|
|
|
},
|
|
|
computed:{
|
|
|
|
|
|
},
|
|
|
created() {
|
|
|
// #ifdef H5 || APP-VUE || APP-PLUS
|
|
|
this.cid = uni.$tm.guid();
|
|
|
// #endif
|
|
|
// #ifdef MP-WEIXIN || MP-ALIPAY
|
|
|
this.is2d=true;
|
|
|
// #endif
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
this.$nextTick(function(){
|
|
|
this.inits();
|
|
|
})
|
|
|
},
|
|
|
destroyed() {
|
|
|
clearInterval(this.timid)
|
|
|
},
|
|
|
watch:{
|
|
|
|
|
|
value:function(newval,oldval){
|
|
|
if(newval < 0){
|
|
|
this.$emit("input",0)
|
|
|
this.$emit("update:value",0)
|
|
|
this.$emit("change",0)
|
|
|
return;
|
|
|
}else if(newval >100){
|
|
|
this.$emit("input",100)
|
|
|
this.$emit("update:value",100)
|
|
|
this.$emit("change",100)
|
|
|
return;
|
|
|
}
|
|
|
this.$emit("input",newval)
|
|
|
this.$emit("update:value",newval)
|
|
|
this.$emit("change",newval)
|
|
|
let blv = newval - oldval;
|
|
|
if(newval>=100){
|
|
|
blv = 100 - oldval;
|
|
|
}
|
|
|
|
|
|
if(blv >= 0 ){
|
|
|
this.startHuiZhi(blv,oldval,true)
|
|
|
}else{
|
|
|
if(newval<=0){
|
|
|
blv = oldval;
|
|
|
}
|
|
|
|
|
|
this.startHuiZhi(Math.abs(blv),oldval,false)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
inits(){
|
|
|
let t = this;
|
|
|
if(this.is2d){
|
|
|
const query = wx.createSelectorQuery().in(this)
|
|
|
query.select('#'+this.cid)
|
|
|
.node((res) => {
|
|
|
const canvas = res.node
|
|
|
const ctx = canvas.getContext('2d')
|
|
|
const dpr = uni.getSystemInfoSync().pixelRatio
|
|
|
canvas.width = res.node._width * dpr
|
|
|
canvas.height = res.node._height * dpr
|
|
|
ctx.scale(dpr, dpr)
|
|
|
t.ctx = ctx;
|
|
|
t.creatShape();
|
|
|
this.startHuiZhi(this.value,0,true)
|
|
|
})
|
|
|
.exec()
|
|
|
}else{
|
|
|
this.ctx = uni.createCanvasContext(this.cid,this)
|
|
|
this.creatShape();
|
|
|
this.startHuiZhi(this.value,0,true)
|
|
|
}
|
|
|
},
|
|
|
startHuiZhi(val,oldv,type){
|
|
|
clearInterval(this.timid);
|
|
|
let i = 0;
|
|
|
let t = this;
|
|
|
|
|
|
// #ifdef H5
|
|
|
this.timid = setInterval(()=>{
|
|
|
i += 1;
|
|
|
if(i>=val){
|
|
|
clearInterval(t.timid);
|
|
|
return;
|
|
|
}
|
|
|
if(type){
|
|
|
t.huizhired(oldv+i,type);
|
|
|
}else{
|
|
|
t.huizhired(oldv-i,type);
|
|
|
}
|
|
|
},5)
|
|
|
// #endif
|
|
|
// #ifndef H5
|
|
|
if(type){
|
|
|
t.huizhired(val+oldv,type);
|
|
|
}else{
|
|
|
t.huizhired(oldv-val,type);
|
|
|
}
|
|
|
// #endif
|
|
|
},
|
|
|
// 重新绘制。
|
|
|
creatShape() {
|
|
|
|
|
|
if(!this.ctx) return;
|
|
|
let ctx= this.ctx;
|
|
|
let x,y,r ;
|
|
|
x = y = this.size / 2;
|
|
|
r = (this.size - this.lineWidth*2) / 2
|
|
|
if(this.is2d){
|
|
|
ctx.beginPath()
|
|
|
ctx.lineCap='round';
|
|
|
ctx.lineWidth=this.lineWidth-1;
|
|
|
ctx.strokeStyle=this.bgcolor;
|
|
|
if(this.semicircle){
|
|
|
ctx.arc(x, y, r, Math.PI, 0)
|
|
|
}else{
|
|
|
ctx.arc(x, y, r, -90, 2 * Math.PI)
|
|
|
}
|
|
|
ctx.stroke()
|
|
|
}else{
|
|
|
ctx.beginPath()
|
|
|
ctx.setLineCap('round')
|
|
|
ctx.setLineWidth(this.lineWidth-1)
|
|
|
ctx.setStrokeStyle(this.bgcolor)
|
|
|
if(this.semicircle){
|
|
|
ctx.arc(x, y, r, Math.PI, 0)
|
|
|
}else{
|
|
|
ctx.arc(x, y, r, -90, 2 * Math.PI)
|
|
|
}
|
|
|
ctx.stroke()
|
|
|
ctx.draw(true)
|
|
|
}
|
|
|
|
|
|
|
|
|
},
|
|
|
huizhired(end=0,type){
|
|
|
if(!this.ctx) return;
|
|
|
let ctx = this.ctx;
|
|
|
|
|
|
if(end>=100) end = 100;
|
|
|
if(end<=0) end = 0;
|
|
|
let bl = end * 3.6;
|
|
|
|
|
|
bl = bl-90
|
|
|
let x,y,r ;
|
|
|
x = y = this.size / 2;
|
|
|
r = (this.size - this.lineWidth*2) / 2
|
|
|
if(this.is2d){
|
|
|
|
|
|
ctx.beginPath()
|
|
|
ctx.lineCap='round';
|
|
|
ctx.lineWidth=type?this.lineWidth-1:this.lineWidth+1;
|
|
|
ctx.strokeStyle=this.bgcolor
|
|
|
if(this.semicircle){
|
|
|
ctx.arc(x, y, r, Math.PI, 0)
|
|
|
}else{
|
|
|
ctx.arc(x, y, r, -90, 2 * Math.PI)
|
|
|
}
|
|
|
ctx.stroke()
|
|
|
|
|
|
ctx.beginPath()
|
|
|
ctx.lineCap='round';
|
|
|
ctx.lineWidth=this.lineWidth
|
|
|
var grd=ctx.createLinearGradient(x,0,0,2*x);
|
|
|
let colorl = this.color.length;
|
|
|
|
|
|
if(colorl==1){
|
|
|
grd.addColorStop(1,this.color[0]);
|
|
|
}else if(colorl>1){
|
|
|
for(let i=0;i<colorl;i++){
|
|
|
grd.addColorStop(i/(colorl-1),this.color[i]);
|
|
|
}
|
|
|
}
|
|
|
ctx.strokeStyle=grd
|
|
|
|
|
|
if(this.semicircle){
|
|
|
let val = this.value;
|
|
|
val = val <=0?0:val;
|
|
|
val = val>=100?100:val;
|
|
|
bl = -(Math.PI-this.value/100 * Math.PI)
|
|
|
ctx.arc(x, y, r, Math.PI, bl)
|
|
|
}else{
|
|
|
ctx.arc(x, y, r, -90 * (Math.PI / 180), bl * (Math.PI / 180))
|
|
|
}
|
|
|
ctx.stroke()
|
|
|
}else{
|
|
|
|
|
|
ctx.beginPath()
|
|
|
ctx.setLineCap('round')
|
|
|
ctx.setLineWidth(type?this.lineWidth-1:this.lineWidth+1)
|
|
|
ctx.setStrokeStyle(this.bgcolor)
|
|
|
if(this.semicircle){
|
|
|
ctx.arc(x, y, r, Math.PI, 0)
|
|
|
}else{
|
|
|
ctx.arc(x, y, r, -90, 2 * Math.PI)
|
|
|
}
|
|
|
|
|
|
ctx.stroke()
|
|
|
ctx.draw(true)
|
|
|
|
|
|
ctx.beginPath()
|
|
|
ctx.setLineCap('round')
|
|
|
ctx.setLineWidth(this.lineWidth)
|
|
|
var grd=ctx.createLinearGradient(x,0,0,2*x);
|
|
|
let colorl = this.color.length;
|
|
|
|
|
|
if(colorl==1){
|
|
|
grd.addColorStop(1,this.color[0]);
|
|
|
}else if(colorl>1){
|
|
|
for(let i=0;i<colorl;i++){
|
|
|
grd.addColorStop(i/(colorl-1),this.color[i]);
|
|
|
}
|
|
|
}
|
|
|
ctx.setStrokeStyle(grd)
|
|
|
if(this.semicircle){
|
|
|
let val = this.value;
|
|
|
val = val <=0?Math.PI:val;
|
|
|
val = val>=100?100:val;
|
|
|
bl = -(Math.PI-this.value/100 * Math.PI)
|
|
|
bl = Math.abs(bl)>=Math.PI?Math.PI:bl;
|
|
|
ctx.arc(x, y, r, Math.PI, bl)
|
|
|
}else{
|
|
|
ctx.arc(x, y, r, -90 * (Math.PI / 180), bl * (Math.PI / 180))
|
|
|
}
|
|
|
ctx.stroke()
|
|
|
ctx.draw(true)
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.tm-propressRound{
|
|
|
position: relative;
|
|
|
.tm-propressRound-text{
|
|
|
position: absolute;
|
|
|
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
align-content: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|