<view class="canvasContainer clearfix">
  <!-- 第一个 -->
  <view class='progress_box' style='height:{{canvasW +  40}}px;width:{{canvasW}}px;' wx:for="{{canvasData}}" wx:key="*this">
    <canvas class="progress_bg" canvas- style='height:{{canvasW}}px;width:{{canvasW}}px;'> </canvas>
    <canvas class="progress_canvas" canvas- style='height:{{canvasW}}px;width:{{canvasW}}px;'> </canvas>
    <view class="progress_text">
      <!-- <image src='../../image/{{imgarr[index]}}'></image> -->
    </view>
    <view class='equName'>
      <text>{{equName[index]}}：</text>
      <text>11/2{{index}}</text>
    </view>
  </view>
</view>
<!-- <cover-view>遮布层 -->
<cover-view class='stationBox' animation="{{animation}}">
  <cover-view class='tips' bindtap='moveBtn'>
    <!-- <cover-image src='{{imgUrl}}'></cover-image> -->
  </cover-view>
  <cover-view class='station'>
    <cover-view class='list-item-title'>
      <cover-view>房间列表</cover-view>
      <!-- <cover-image src='../../image/sx.png' catchtap='sxBtn'></cover-image> -->
    </cover-view>
    <cover-view class='select'>
      <block wx:for="{{[1,2,3,4,5,7,8,9,10,11,12,13,14]}}" wx:key="this">
        <cover-view class='list-item-box textEllipsis'>
          测试呀---{{index}}
        </cover-view>
      </block>
    </cover-view>
  </cover-view>
</cover-view>

/* canvas画圆的样式 */

.progress_box {
  position: relative;
  /* 这里的宽高是必须大于等于canvas圆环的直径 否则绘制到盒子外面就看不见了,一开始设置 width:440rpx; height:440rpx; 发现 在360X640分辨率的设备，下绘制的圆环跑盒子外去了,小程序使用rpx单位适配 ，但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示 */
  /* width: 220px;
  height: 220px; */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  float: left;
}

.progress_bg {
  position: absolute;
  /* width: 220px;
  height: 220px; */
}

.progress_canvas {
  /* width: 220px;
  height: 220px; */
}

.progress_text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress_info {
  font-size: 36rpx;
  padding-left: 16rpx;
  letter-spacing: 2rpx;
}

.progress_dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #fb9126;
}
.progress_text image {
  width: 3rem;
  height: 3rem;
}
.equName {
  position: absolute;
  bottom: 0;
  display: flex;
  font-size: 0.8rem;
}
/* 清除浮动 */

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.cfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  zoom: 1;
}

const app = getApp()

Page({
  data: {
    imgarr: ["cjq.png", "fj.png", "sj.png", "kt.png"],
    wrapColor: ["#40a1ff", "#4ecb76", "#955ee1", "#e37254"],
    equName: ["空调", "风机", "采集器", "水浸"]
  },
  onLoad: function() {
    this.dataFun();

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    let windW = wx.getSystemInfoSync().windowWidth;
    let canvasW = windW / 3;

    this.setData({
      canvasW: canvasW
    });

    var arr = [1, 2, 3, 4];

    for (let i = 0; i < arr.length; i++) {
      //底层canvas的ID
      let canvasID = "canvasProgressbg-" + i;
      //外层canvas的ID
      let wrapCanvasID = "canvasProgress-" + i;

      this.drawProgressbg(canvasID, canvasW);

      this.drawCircle(arr[i] * 0.5, wrapCanvasID, canvasW, this.data.wrapColor[i]);
    }

  },
  //延迟模拟数据
  dataFun: function() {
    //延迟500ms,模拟网络请求时间
    setTimeout(() => {
      this.setData({
        canvasData: [1, 2, 3, 4]
      })
    }, 500)

  },
  // 画圆函数
  drawProgressbg: function(canvasId, canvasW) {
    let ctx = wx.createCanvasContext(canvasId, this);
    ctx.setLineWidth(8); // 设置圆环的宽度
    ctx.setStrokeStyle('#404c58'); // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath(); //开始一个新的路径
    ctx.arc(canvasW / 2, canvasW / 2, canvasW / 2 - 20, 0, 2 * Math.PI, false);
    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
    ctx.stroke(); //对当前路径进行描边
    ctx.draw();
  },
  // 画彩色圆环的函数drawCircle
  drawCircle: function(step, wrapCanvasID, canvasW, wrapColor) {
    let context = wx.createCanvasContext(wrapCanvasID);
    // 设置渐变
    var gradient = context.createLinearGradient(200, 100, 100, 200);
    gradient.addColorStop("0", wrapColor);
    gradient.addColorStop("0.5", wrapColor);
    gradient.addColorStop("1.0", wrapColor);

    context.setLineWidth(8);
    context.setStrokeStyle(gradient);
    context.setLineCap('square')
    context.beginPath();
    // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
    context.arc(canvasW / 2, canvasW / 2, canvasW / 2 - 20, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
    context.stroke();
    context.draw()
  }
})