通过vue点击事件显示测算过程

1.样式
<el-button
icon=“fa fa-calculator”
@click=“doCalc”
:loading=“btnCalcDisable”
>
开始测算
《/el-button>
2、data数据
// 测算过程
calcProcess: {
isShow: false, //窗体是否显示
list: [], //检测字段列表
status: 1, //测算状态
isComputed: false, //是否正在计算
virtualMaxTime: 500, //虚拟检测过程最大时间
resultList: [], // B8表结果
},
3、通过弹窗

<el-dialog
  title="开始测算"
  :visible.sync="calcProcess.isShow"
  @close="
    calcProcess.list.forEach((item) => (item.virtualstatus = -1));
    calcProcess.status = 1;
  "
>
  <div style="padding: 0 20px; line-height: 32px">
    <div style="margin-bottom: 20px">
      <el-steps :active="calcProcess.status" finish-status="success">
        <el-step title="收集数据"></el-step>
        <el-step title="检查数据合法性"></el-step>
        <el-step title="提交数据"></el-step>
        <el-step title="数据计算"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>
    <el-row :gutter="20">
      <el-col
        v-for="(item, index) of calcProcess.list"
        :key="index"
        :span="6"
      >
        <div
          style="font-size: 16px"
          class="grid-content bg-purple smallButton"
        >
          <span>{{ item.text }} </span>
          <span>
            <i
              v-if="item.virtualstatus === -1"
              class="el-icon-loading transition-box"
            ></i>
            <transition name="el-zoom-in-center">
              <el-button
                v-if="item.virtualstatus === 1"
                size="mini"
                type="success"
                icon="el-icon-check"
                circle
              ></el-button>
              <el-button
                v-if="item.virtualstatus === 0"
                size="mini"
                type="danger"
                icon="el-icon-close"
                circle
              ></el-button>
            </transition>
          </span>
        </div>
      </el-col>
    </el-row>

    <el-skeleton :rows="10" animated>
      <template slot="template">
        <template
          v-if="calcProcess.isComputed && calcProcess.status == 2"
          @click="calcProcess.isShow = false"
        >
          <div style="margin-top: 10px; overflow: hidden">
            <el-alert
              title="请重新检查并填写错误的基础数据后再计算。"
              type="error"
              show-icon
            ></el-alert>
          </div>
          <div style="margin-top: 10px; overflow: hidden">
            <el-button
              style="float: right"
              type="danger"
              icon="el-icon-edit"
              v-if="calcProcess.isComputed && calcProcess.status != 5"
              @click="calcProcess.isShow = false"
              >去完善基础数据
            </el-button>
          </div>
        </template>
        <template v-if="calcProcess.isComputed && calcProcess.status == 5">
          <div style="margin-top: 10px; overflow: hidden">
            <el-descriptions
              class="margin-top"
              :column="3"
              size="small"
              border
            >
              <el-descriptions-item
                v-for="item of calcProcess.resultList"
                :key="item.gcid"
              >
                <template slot="label">
                  {{ item.title }}
                </template>
                {{
                  item.disp === "f%"
                    ? Math.round(item.hj * 10000) / 100 + item.unit
                    : Math.round(item.hj * 100) / 100 + item.unit
                }}
                <!-- (item.disp === "f%" ? "%" : "万元") -->
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="margin-top: 10px; overflow: hidden">
            <el-alert
              title="计算完成。"
              type="success"
              show-icon
            ></el-alert>
          </div>
          <div style="margin-top: 10px; overflow: hidden">
            <template>
              <el-popconfirm
                title="此项操作会导致您的当前打开工程暂时切换至子工程？"
                @confirm="qipao"
              >
                <el-button
                  style="float: right"
                  type="primary"
                  slot="reference"
                  icon="el-icon-finished"
                  @click="goReport"
                  v-if="calcProcess.isComputed && calcProcess.status == 5"
                  >查看详细报表报告
                </el-button>
              </el-popconfirm>
            </template>
          </div>
        </template>
      </template>
    </el-skeleton>
    <el-button style="float: right" loading v-if="!calcProcess.isComputed"
      >努力计算中，请稍后..
    </el-button>
  </div>
</el-dialog>

4、点击事件
doCalc() {
this.btnCalcDisable = true;
this.check_message = “”;
this.calcProcess.isComputed = false;
// 显示测算过程窗体
this.calcProcess.isShow = true;
calc(this.gcid).then((res) => {
// 测试测算字段
console.log(res);
this.calcProcess.list = res.data.split("。").map((item) => {
console.log(this.calcProcess.list);
return {
text: item.slice(0, item.indexOf(“开始”)),
status: item.indexOf(“完成”) !== -1 ? 1 : 0,
virtualstatus: -1,
responseTime: Math.random() * this.calcProcess.virtualMaxTime,
};
});
this.calcProcess.list.pop();
this.calcProcess.isComputed = true;
this.calcProcess.list.forEach((item) => {
setTimeout(() => {
item.virtualstatus = item.status;
}, item.responseTime);
});
this.btnCalcDisable = false;
if (res.msg == “success”) {
setTimeout(() => {
this.calcProcess.status = 5;
this.calcProcess.resultList = res.result;
console.log(this.calcProcess.resultList);
}, this.calcProcess.virtualMaxTime);
} else if (res.msg == “fail”) {
// this.KaTeX parse error: Expected 'EOF', got '}' at position 100: …// }); }̲ else if (res.m…emit(‘gcmc’,this.project.gcmc)
},
完成的结果