performance-test/src/views/dataAdministration/index.vue

<template>
  <div class="global-variable" v-loading="loading">
    <div class="condition">
      <el-form
        ref="ruleForm"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="批次名称:" prop="batchName">
          <el-input
            v-model="formInline.batchName"
            placeholder="请输入批次名称"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态:" prop="transferState">
          <el-select
            v-model="formInline.transferState"
            placeholder="请选择状态"
            size="small "
          >
            <el-option
              v-for="item in stateDataList"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="small"
            >查询</el-button
          >
          <el-button @click="reset('ruleForm')" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list-page">
      <div class="newly">
        <el-button type="primary" @click="addData" size="small">新增</el-button>
      </div>
      <el-table
        class="center-align-table"
        :data="tableData"
        border
        :cell-style="rowStyle"
        stripe
        style="width: 100%"
      >
        <!-- Table Columns -->
        <el-table-column
          fixed
          prop="batchName"
          align="center"
          label="批次名称"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="fieldName"
          align="center"
          label="风场名称"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="engineCount"
          align="center"
          label="机组数量"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="transferTypeName"
          align="center"
          label="类型"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="transferProgress"
          align="center"
          label="进度"
          min-width="200"
        >
          <template slot-scope="scope">
            <el-progress
              v-if="scope.row.transferState == 0"
              :indeterminate="true"
              :stroke-width="20"
              :percentage="scope.row.transferProgress"
              class="animated-progress"
            ></el-progress>
            <span v-else>/</span>
          </template>
        </el-table-column>
        <el-table-column prop="" align="center" label="状态" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.transferState == -1">未转换</span>
            <span v-else-if="scope.row.transferState == 0" style="color: #f90"
              >转换中</span
            >
            <span
              v-else-if="scope.row.transferState == 1"
              style="color: #4caf50"
              >转换成功</span
            >
            <span v-else-if="scope.row.transferState == 2" style="color: #f00"
              >转换失败</span
            >
            <span v-else>/</span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          align="center"
          label="异常状态"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.transferState == 2 ? "异常" : "未异常" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="abnormal"
          label="异常信息"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.transferState == 2"
              @click="particulars(scope.row)"
              type="text"
              size="small"
              >详情</el-button
            >
            <span v-else>/</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="transferFinishTime"
          align="center"
          label="转换时间"
          min-width="230"
        >
        </el-table-column>
        <el-table-column
          prop="transition"
          align="center"
          fixed="right"
          label="操作"
          min-width="150"
        >
          <template slot-scope="scope">
            <el-button
              v-if="
                scope.row.transferState !== -1 &&
                (scope.row.transferAddr !== null ||
                  scope.row.transferAddr !== '')
              "
              @click="handleEdit(scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              @click="handleClick(scope.row.downloadUrl)"
              type="text"
              size="small"
              >下载</el-button
            >
            <el-button
              v-if="
                scope.row.transferState == -1 &&
                (scope.row.transferAddr === null ||
                  scope.row.transferAddr === '')
              "
              @click="editTransferState(scope.row, '转换')"
              type="text"
              size="small"
              >转换</el-button
            >
            <el-button
              v-else
              @click="editTransferState(scope.row, '重新转换')"
              type="text"
              size="small"
              :disabled="scope.row.transferState == 0"
              >重新转换</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="formInline.pageNum"
          layout="total, prev, pager, next"
          :page-size="formInline.pageSize"
          :total="formInline.totalSize"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹出层 -->
    <!-- 新增 -->
    <el-dialog
      title="新增（批次列表为空时，请前往性能分析下批次管理中添加批次！）"
      :visible.sync="nuedialog"
      class="dialogBox"
      width="900px"
      :before-close="handleCloses"
    >
      <div v-loading="loadingView" class="views">
        <el-form ref="form" :model="newform" label-width="150px">
          <el-row>
            <el-form-item
              label="批次名称:"
              prop="batchCode"
              :rules="batchCodeRules"
            >
              <el-select
                filterable
                v-model="newform.batchCode"
                placeholder="请选择批次名称"
                size="small"
              >
                <el-option
                  v-for="item in batchList"
                  :key="item.batchCode"
                  :label="item.batchName"
                  :value="item.batchCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row
            v-for="(item, index) in newform.dataTransferTypePathDtoList"
            :key="item.transferType"
          >
            <el-col :span="11">
              <el-form-item
                :label="item.transferTypeName + ':'"
                :prop="'transferAddr_' + index"
                :rules="getFileAddrRules(index)"
              >
                <el-input
                  :min="1"
                  v-model="item.transferAddr"
                  :placeholder="'请输入' + item.transferTypeName"
                  size="small"
                  @change="ensureMinValue(item, 'transferAddr')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item
                :label="item.timeGranularityName + ':'"
                :prop="'timeGranularity_' + index"
                :rules="getTimeGranularityRules(index)"
              >
                <el-input
                  type="number"
                  :min="1"
                  v-model="item.timeGranularity"
                  :placeholder="'请输入' + item.timeGranularityName"
                  size="small"
                  @input="ensureMinValue(item, 'timeGranularity')"
                >
                  <template slot="append">秒</template></el-input
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel('form')" size="small">取 消</el-button>
          <el-button type="primary" @click="newly('form')" size="small"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="编辑"
      :visible.sync="editNuedialog"
      class="dialogBox"
      width="900px"
      :before-close="handleCloses"
    >
      <div v-loading="loadingViewEdit" class="views">
        <el-form
          ref="editForm"
          :model="newEditForm"
          label-width="160px"
          :rules="editRules"
        >
          <el-row>
            <el-form-item label="批次名称:" prop="batchCode">
              <el-select
                v-model="newEditForm.batchName"
                placeholder="请选择批次名称"
                size="small"
                disabled
              >
                <el-option
                  v-for="item in batchList"
                  :key="item.batchCode"
                  :label="item.batchName"
                  :value="item.batchCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item prop="dataTransferTypePathDtoList.0.transferAddr">
                <span slot="label">
                  <el-tooltip
                    content="路径输入例如：/XX/XX/XX路径"
                    placement="bottom-start"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                  {{
                    newEditForm.dataTransferTypePathDtoList[0]
                      .transferTypeName + ":"
                  }}
                </span>
                <!-- :rules="{
                  required: true,
                  message:
                    '请输入' +
                    newEditForm.dataTransferTypePathDtoList[0].transferTypeName,
                  trigger: 'blur',
                }" -->
                <el-input
                  disabled
                  v-model="
                    newEditForm.dataTransferTypePathDtoList[0].transferAddr
                  "
                  :placeholder="
                    '请输入' +
                    newEditForm.dataTransferTypePathDtoList[0].transferTypeName
                  "
                  size="small"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item
                :label="
                  newEditForm.dataTransferTypePathDtoList[0]
                    .timeGranularityName + ':'
                "
                prop="dataTransferTypePathDtoList.0.timeGranularity"
                :rules="{
                  required: true,
                  message:
                    '请输入' +
                    newEditForm.dataTransferTypePathDtoList[0]
                      .timeGranularityName,
                  trigger: 'blur',
                }"
              >
                <el-input
                  type="number"
                  :min="1"
                  v-model="
                    newEditForm.dataTransferTypePathDtoList[0].timeGranularity
                  "
                  :placeholder="
                    '请输入' +
                    newEditForm.dataTransferTypePathDtoList[0]
                      .timeGranularityName
                  "
                  size="small"
                >
                  <template slot="append">秒</template></el-input
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row> </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editCancel('editForm')" size="small"
            >取 消</el-button
          >
          <el-button type="primary" @click="editly('editForm')" size="small"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
    <!-- 异常信息详情 -->
    <el-dialog
      title="异常详情"
      :visible.sync="unusualdialog"
      width="800px"
      :before-close="handleCloses"
    >
      {{ errInfo }}
    </el-dialog>
    <!-- 转换\重新转换 -->
    <el-dialog
      :title="editTransferStateTitle"
      :visible.sync="editTransferStateLoading"
      width="900px"
      :before-close="handleCloses"
    >
      <div v-loading="loadingViewEdit" class="views">
        <el-form
          ref="editStateForm"
          :model="editTransferStateForm"
          label-width="160px"
        >
          <el-row>
            <el-form-item label="批次名称:" prop="batchCode">
              <el-select
                v-model="editTransferStateForm.batchName"
                placeholder="请选择批次名称"
                size="small"
                disabled
              >
                <el-option
                  v-for="item in batchList"
                  :key="item.batchCode"
                  :label="item.batchName"
                  :value="item.batchCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                prop="dataTransferTypePath"
                :rules="{
                  required: true,
                  message: `请输入${editTransferStateForm.transferTypeName}`,
                  trigger: 'blur',
                }"
              >
                <span slot="label">
                  <el-tooltip
                    content="路径输入例如：/XX/XX/XX路径"
                    placement="bottom-start"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                  {{ editTransferStateForm.transferTypeName + ":" }}
                </span>
                <el-input
                  v-model="editTransferStateForm.dataTransferTypePath"
                  :placeholder="'请输入数据转换路径'"
                  size="small"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="时间粒度"
                prop="timeGranularity"
                :rules="{
                  required: true,
                  message: '请输入时间粒度',
                  trigger: 'blur',
                }"
              >
                <el-input
                  type="number"
                  :min="1"
                  v-model="editTransferStateForm.timeGranularity"
                  placeholder="
                      请输入时间粒度
                    "
                  size="small"
                >
                  <template slot="append">秒</template></el-input
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editstateCancel('editStateForm')" size="small"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="editStately('editStateForm')"
            size="small"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryDataTransferList,
  fieldBatchListForDataTransfer,
  addDataTransferList,
  editTimeGranularityQuery,
  dataTransfer,
} from "@/api/dataManage";
import axios from "axios";
export default {
  data() {
    return {
      intervalId: null,
      startTime: null,
      maxPollingTime: 5 * 60 * 1000, //轮询最大时间
      loading: false,
      editTransferStateForm: {
        transferAddr: "",
        dataTransferTypePath: "",
        batchName: "",
        batchCode: "",
        timeGranularity: "",
      },
      editTransferStateTitle: "",
      editTransferStateLoading: false,
      loadingView: false,
      formInline: {
        batchName: "",
        transferState: "",
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
      batchCodeRules: [
        {
          required: true,
          message: "批次编号不能为空",
          trigger: ["change", "blur"],
        },
      ],
      editRules: {
        batchCode: {
          required: true,
          message: "批次编号不能为空",
          trigger: ["change", "blur"],
        },
      },
      rules: {
        batchCode: {
          required: true,
          message: "批次编号不能为空",
          trigger: "change",
        },
      },
      errInfo: "",
      stateDataList: [
        {
          lable: "未转换",
          value: -1,
        },
        {
          lable: "转换中",
          value: 0,
        },
        {
          lable: "转换成功",
          value: 1,
        },
        {
          lable: "转换失败",
          value: 2,
        },
      ],
      batchList: [],
      tableData: [],
      nuedialog: false,
      unusualdialog: false,
      newform: {
        batchCode: "",
        dataTransferTypePathDtoList: [],
      },
      editNuedialog: false,
      loadingViewEdit: false,
      newEditForm: {
        batchCode: "",
        batchName: "",
        dataTransferTypePathDtoList: [{}],
      },
    };
  },
  created() {
    this.getTableList();
    this.getBatchCodeList();
  },
  methods: {
    handleCloses(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.getBatchCodeList();
          done();
        })
        .catch((_) => {});
    },
    ensureMinValue(item, field) {
      if (item[field] < 1) {
        item[field] = 1;
      }
    },
    editstateCancel(formName) {
      this.$refs[formName] && this.$refs[formName].resetFields();
      this.editTransferStateForm = {
        transferAddr: "",
        dataTransferTypePath: "",
        batchName: "",
        batchCode: "",
        timeGranularity: "",
        transferType: "",
        transferTypeName: "",
        timeGranularityName: "",
      };
      this.editTransferStateLoading = false;
      this.loadingViewEdit = false;
      this.getBatchCodeList();
    },
    editStately(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingViewEdit = true;
          dataTransfer({
            dataTransferAddr: this.editTransferStateForm.dataTransferTypePath,
            dataTransferType: this.editTransferStateForm.transferType,
            batchCode: this.editTransferStateForm.batchCode,
            timeGranularity: this.editTransferStateForm.timeGranularity,
          })
            .then((res) => {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.getTableList();
              this.editstateCancel();
            })
            .catch((error) => {
              this.loadingViewEdit = false;
            });
        } else {
          return false;
        }
      });
    },
    //转换\重新转换
    editTransferState(row, title) {
      console.log(row, "row");
      this.editTransferStateForm.timeGranularity = row.timeGranularity;
      this.editTransferStateForm.dataTransferTypePath = row.transferAddr
        ? row.transferAddr
        : "";
      this.editTransferStateForm.batchCode = row.batchCode;
      this.editTransferStateForm.batchName = row.batchName;
      this.editTransferStateForm.transferType = row.transferType;
      this.editTransferStateForm.transferTypeName = row.transferTypeName;
      this.editTransferStateForm.timeGranularityName = row.timeGranularityName;
      this.editTransferStateTitle = title;
      this.editTransferStateLoading = true;
    },
    handleEdit(row) {
      this.editNuedialog = true;
      this.newEditForm.batchCode = row.batchCode;
      this.newEditForm.batchName = row.batchName;
      this.newEditForm.dataTransferTypePathDtoList[0] = { ...row };
      console.log(this.newEditForm.dataTransferTypePathDtoList[0], "编辑");
    },
    editCancel() {
      this.newform = {
        batchCode: "",
        dataTransferTypePathDtoList: [{}],
      };
      this.editNuedialog = false;
      this.loadingViewEdit = false;
      this.getTableList();
      this.getBatchCodeList();
    },
    editly(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingViewEdit = true;
          editTimeGranularityQuery({
            timeGranularity:
              this.newEditForm.dataTransferTypePathDtoList[0].timeGranularity,
            dataTransferType:
              this.newEditForm.dataTransferTypePathDtoList[0].transferType,
            batchCode: this.newEditForm.batchCode,
          })
            .then((res) => {
              this.$message({
                message: "编辑成功",
                type: "success",
              });

              this.editCancel();
            })
            .catch((error) => {
              console.log("shibai", error);
              this.loadingViewEdit = false;
            });
        } else {
          return false;
        }
      });
    },
    getFileAddrRules(index) {
      return [{ validator: this.validateFileAddr, trigger: "blur" }];
    },
    getTimeGranularityRules(index) {
      return [
        {
          validator: (rule, value, callback) =>
            this.validateTimeGranularity(rule, value, callback, index),
          trigger: "blur",
        },
      ];
    },
    validateFileAddr(rule, value, callback) {
      // 判断是否至少有一项 transferAddr 有值
      const hasFileAddr = this.newform.dataTransferTypePathDtoList.some(
        (item) => item.transferAddr
      );
      if (!hasFileAddr) {
        callback(new Error("请至少填写一个数据路径"));
      } else {
        callback();
      }
    },
    validateTimeGranularity(rule, value, callback, index) {
      // 判断对应的 transferAddr 有值，则对应的 timeGranularity 也必须有值
      const currentItem = this.newform.dataTransferTypePathDtoList[index];
      if (currentItem.transferAddr && !currentItem.timeGranularity) {
        callback(new Error("请填写时间粒度"));
      } else {
        callback();
      }
    },
    cancel(formName) {
      this.$refs[formName] && this.$refs[formName].resetFields();
      this.newform = {
        batchCode: "",
        dataTransferTypePathDtoList: [],
      };
      this.getBatchCodeList();
      this.nuedialog = false;
      this.loadingView = false;
    },
    rowStyle() {
      return "text-align:center";
    },
    // 查询
    onSubmit() {
      this.getTableList();
    },
    // 重置
    reset(formName) {
      this.$refs[formName].resetFields();
      this.getTableList();
    },
    // 新增
    newly(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingView = true;
          addDataTransferList({ ...this.newform })
            .then((res) => {
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.getTableList();
              this.cancel();
              this.loadingView = false;
            })
            .catch(() => {
              this.loadingView = false;
            });
        } else {
          return false;
        }
      });
    },
    //异常详情
    particulars(row) {
      this.unusualdialog = true;
      this.errInfo = row.errInfo;
    },
    //下载
    async handleClick(downloadUrl) {
      let newWindow = window.open(downloadUrl, "_blank");
      if (
        !newWindow ||
        newWindow.closed ||
        typeof newWindow.closed == "undefined"
      ) {
        alert("弹出窗口已被阻止！请允许弹出式窗口访问本网站。");
      }
    },
    // async handleClick() {
    //   try {
    //     // 获取 HTML 内容
    //     const response = await axios.get("/downLoadApi", {
    //       responseType: "blob",
    //     }); // 确保响应类型为 Blob
    //     const reader = new FileReader();
    //     reader.onload = function (event) {
    //       const htmlContent = event.target.result; // 读取的 HTML 内容
    //       const newWindow = window.open("", "_blank");
    //       newWindow.document.open();
    //       newWindow.document.write(htmlContent);
    //       newWindow.document.close();
    //       // 获取当前页面的 URL
    //       const currentUrl = window.location.href;
    //       const proxyUrl = currentUrl.substring(0, currentUrl.indexOf("/", 8)); // 从第8个字符开始搜索，找到第一个 "/" 为止
    //       // 拼接代理地址和接口路径
    //       const apiEndpoint = proxyUrl + "/downLoadApi";

    //       // 拼接新的路径
    //       const newUrl = apiEndpoint + "/downLoadApi";
    //       // 设置 base 元素
    //       const baseElement = newWindow.document.createElement("base");
    //       baseElement.href = newUrl; // 使用代理地址和接口路径
    //       newWindow.document.head.appendChild(baseElement);
    //     };
    //     reader.readAsText(response.data, "utf-8"); // 以 UTF-8 编码读取 Blob
    //   } catch (error) {
    //     console.error("Failed to fetch data:", error);
    //     this.$message.error("无法打开新链接");
    //   }
    // },
    async getTableList() {
      try {
        this.loading = true;
        const result = await queryDataTransferList({
          ...this.formInline,
          totalSize: undefined,
        });
        this.tableData = result.data.list;
        this.formInline.totalSize = result.data.totalSize;
        this.loading = false;
      } catch (error) {
        this.$message({
          type: "error",
          message: "请检查是否连接网络",
        });
      }
    },
    //分页数据切换
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.getTableList();
    },
    //新增按钮
    addData() {
      if (this.batchList === null || this.batchList.length === 0) {
        this.$confirm(
          "批次列表为空，请前往性能分析菜单下的批次管理中添加批次！确认跳转到批次管理菜单吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.$router.push("/home/performance/batchMag?id=22");
            this.$message({
              type: "success",
              message: "成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        this.nuedialog = true;
      }
    },
    //获取批次编号列表接口
    async getBatchCodeList() {
      this.loading = true;
      try {
        const result = await fieldBatchListForDataTransfer();
        this.batchList = result.data.batchCodeList;
        this.newform.dataTransferTypePathDtoList =
          result.data.dataTransferTypeVoList;
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },
    async fetchData() {
      try {
        const result = await queryDataTransferList({
          ...this.formInline,
          totalSize: undefined,
        });
        this.tableData = result.data.list;
        this.formInline.totalSize = result.data.totalSize;
      } catch (error) {
        this.$message({
          type: "error",
          message: "请检查是否连接网络",
        });
      }
    },
    stopPolling() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    },
    startPolling() {
      this.startTime = new Date().getTime();
      this.intervalId = setInterval(() => {
        const currentTime = new Date().getTime();
        if (currentTime - this.startTime >= this.maxPollingTime) {
          this.stopPolling();
        } else {
          this.fetchData();
        }
      }, 10000); // 每10秒调用一次
    },
  },
  mounted() {
    this.startPolling();
  },
  beforeDestroy() {
    this.stopPolling();
  },
};
</script>
<style lang="scss" scoped>
::v-deep.dialogBox {
  .el-form-item__content .el-input--small .el-input__inner {
    width: 188px !important;
  }
  .el-row {
    margin: 5px 0;
  }
  .dialog-footer {
    margin-top: 20px;
    justify-content: center !important;
  }
  .el-input-group {
    width: auto;
  }
}
</style>
<style scoped>
@keyframes indeterminate {
  0% {
    left: -100%;
    width: 100%;
  }
  50% {
    left: 100%;
    width: 10%;
  }
  100% {
    left: 100%;
    width: 100%;
  }
}
::v-deep .el-progress__text {
  font-size: 14px !important;
}
.el-progress-bar__outer {
  position: relative;
  vertical-align: middle;
}
.el-progress-bar__inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  text-align: right;
  border-radius: 100px;
  line-height: 1;
  white-space: nowrap;
  transition: width 0.6s ease;
}
.animated-progress .el-progress-bar__inner {
  position: relative;
  transform: translateZ(0);
  animation: indeterminate 3s infinite;
  background-color: #409eff; /* 或者你想要的任何颜色 */
}
</style>