解决前端项目场景问题vue+element进度条el-progress渲染后端动态数据

项目场景：

vue element进度条el-progress渲染后端动态数据

问题描述

percentage：百分比

format：指定文字内容

给它们前面加一个：（冒号），进行回调函数。将数据传给el-progress进度条

核心代码：

1.  
   //js
2.  
   //平均时长和次数，数据渲染到repairState里
3.  
   getrepairOrderStatistics() {
4.  
   this.$inter
5.  
   .getrepairOrderStatistics({
6.  
   wxdw: this.wxdw,
7.  
   sj: this.sj,
8.  
   gzfl: this.gzfl,
9.  
   xzqh: this.xzqh,
10.  
    })
11.  
    .then((res) => {
12.  
    console.log(res);
13.  
    this.repairState = res.data.data;
14.  
    });
15.  
    },

1.  
   //data。定义数据
2.  
   repairState: {
3.  
   clHours: 0,
4.  
   dcCsCs: 0,
5.  
   dcHours: 0,
6.  
   wcCsCs: 0,
7.  
   },

1.  
   //html 回调函数
2.  
   <span>平均到场时长（h）</span>
3.  
   <span> {{ repairState.dcHours }}</span>
4.  
   <el-progress
5.  
   :format="format"
6.  
   :text-inside="true"
7.  
   :show-text="true"
8.  
   :stroke-width="24"
9.  
   :percentage="repairState.dcHours"
10.  
    >
11.  
    </el-progress>

完整代码：

1.  
   <!-- 进度条 -->
2.  
   //html
3.  
   <div ref="bar" class="w100 h100" >
4.  
   <span>平均到场时长（h）</span>
5.  
   <span> {{ repairState.dcHours }}</span>
6.  
   <el-progress
7.  
   :format="format"
8.  
   :text-inside="true"
9.  
   :show-text="true"
10.  
    :stroke-width="24"
11.  
    :percentage="repairState.dcHours"
12.  
    >
13.  
    </el-progress>
14.  
    </div>
15.  
     
16.  
    <div ref="bar" class="w100 h100 statbugheight">
17.  
    <span>到场超时次数（次）</span>
18.  
    <span> {{ repairState.dcCsCs }}</span>
19.  
    <el-progress
20.  
    :format="format"
21.  
    :text-inside="true"
22.  
    :show-text="true"
23.  
    :stroke-width="24"
24.  
    :percentage="repairState.dcCsCs"
25.  
    ></el-progress>
26.  
    </div>
27.  
     
28.  
    <div ref="bar" class="w100 h100 pjguzangbug">
29.  
    <span>平均故障修复时长（h）</span>
30.  
    <span> {{ repairState.clHours }}</span>
31.  
    <el-progress
32.  
    :format="format"
33.  
    :text-inside="true"
34.  
    :show-text="true"
35.  
    :stroke-width="24"
36.  
    status="success"
37.  
    :percentage="repairState.clHours"
38.  
    ></el-progress>
39.  
    </div>
40.  
     
41.  
    <div ref="bar" class="w100 h100 guzangbug">
42.  
    <span>故障修复超时次数（次）</span>
43.  
    <span> {{ repairState.wcCsCs }}</span>
44.  
    <el-progress
45.  
    :format="format"
46.  
    :text-inside="true"
47.  
    :show-text="true"
48.  
    :stroke-width="24"
49.  
    :percentage="repairState.wcCsCs"
50.  
    status="success"
51.  
    ></el-progress>
52.  
    </div>
53.  
    <!-- 进度条 -->
54.  
     
55.  
     
56.  
    //data
57.  
    repairState: {
58.  
    clHours: 0,
59.  
    dcCsCs: 0,
60.  
    dcHours: 0,
61.  
    wcCsCs: 0,
62.  
    },
63.  
     
64.  
    //js
65.  
    //进度条
66.  
    format(repairState) {
67.  
    return `${repairState}`;
68.  
    },
69.  
    //平均时长和次数
70.  
    getrepairOrderStatistics() {
71.  
    this.$inter
72.  
    .getrepairOrderStatistics({
73.  
    wxdw: this.wxdw,
74.  
    sj: this.sj,
75.  
    gzfl: this.gzfl,
76.  
    xzqh: this.xzqh,
77.  
    })
78.  
    .then((res) => {
79.  
    console.log(res);
80.  
    this.repairState = res.data.data;
81.  
    });
82.  
    },

这篇好文章是转载于：学新通技术网