Solve the problem of front-end project scenarios: vue+element progress bar el-progress renders back-end dynamic data

Project scenario:

vue+element progress bar el-progress rendering backend dynamic data

---

Problem Description

percentage: percentage

format: Specified character content

Add a : (colon) in front of them to make a callback function. Pass data to el-progress progress bar

---

Core code:

//js
//平均时长和次数，数据渲染到repairState里
    getrepairOrderStatistics() {
      this.$inter
        .getrepairOrderStatistics({
          wxdw: this.wxdw,
          sj: this.sj,
          gzfl: this.gzfl,
          xzqh: this.xzqh,
        })
        .then((res) => {
          console.log(res);
          this.repairState = res.data.data;
        });
    },

//data。定义数据
repairState: {
        clHours: 0,
        dcCsCs: 0,
        dcHours: 0,
        wcCsCs: 0,
      },

//html 回调函数 
<span>平均到场时长（h）</span>
<span> {
   
   { repairState.dcHours }}</span>
            <el-progress
              :format="format"
              :text-inside="true"
              :show-text="true"
              :stroke-width="24"
              :percentage="repairState.dcHours"
            >
</el-progress>

---

Full code:

 <!-- 进度条 -->
//html
         <div ref="bar" class="w100 h100" >
            <span>平均到场时长（h）</span>
            <span> {
   
   { repairState.dcHours }}</span>
            <el-progress
              :format="format"
              :text-inside="true"
              :show-text="true"
              :stroke-width="24"
              :percentage="repairState.dcHours"
            >
            </el-progress>
          </div>

          <div ref="bar" class="w100 h100 statbugheight">
            <span>到场超时次数（次）</span>
            <span> {
   
   { repairState.dcCsCs }}</span>
            <el-progress
              :format="format"
              :text-inside="true"
              :show-text="true"
              :stroke-width="24"
              :percentage="repairState.dcCsCs"
            ></el-progress>
          </div>

          <div ref="bar" class="w100 h100 pjguzangbug">
            <span>平均故障修复时长（h）</span>
            <span> {
   
   { repairState.clHours }}</span>
            <el-progress
              :format="format"
              :text-inside="true"
              :show-text="true"
              :stroke-width="24"
              status="success"
              :percentage="repairState.clHours"
            ></el-progress>
          </div>

          <div ref="bar" class="w100 h100 guzangbug">
            <span>故障修复超时次数（次）</span>
            <span> {
   
   { repairState.wcCsCs }}</span>
            <el-progress
              :format="format"
              :text-inside="true"
              :show-text="true"
              :stroke-width="24"
              :percentage="repairState.wcCsCs"
              status="success"
            ></el-progress>
          </div>
          <!-- 进度条 -->


//data
 repairState: {
        clHours: 0,
        dcCsCs: 0,
        dcHours: 0,
        wcCsCs: 0,
      },

//js
 //进度条
    format(repairState) {
      return `${repairState}`;
    },
//平均时长和次数
    getrepairOrderStatistics() {
      this.$inter
        .getrepairOrderStatistics({
          wxdw: this.wxdw,
          sj: this.sj,
          gzfl: this.gzfl,
          xzqh: this.xzqh,
        })
        .then((res) => {
          console.log(res);
          this.repairState = res.data.data;
        });
    },

---

The author's previous article,

vue3+ElementPlus stepping on the pit: How long is the drop-down menu with too much data ? max-height The maximum height of the menu string / number https://blog.csdn.net/weixin_43928112/article/details/126451501