adm-front/src/components/model/file/floorTable.vue

<template>
  <div class="filterTable-container">
    <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%"
      height="100%"
      :header-cell-style="{ background: '#d9d9d9', color: '#2b2b2b' }"
    >
      <el-table-column prop="FloorName" label="模型文件" width="180">
        <template slot-scope="scope">
          <i
            v-if="scope.row.Status == 4"
            class="iconfont icon-yun--tianchong"
            style="color: #67c23a; cursor: pointer; fontsize: 18px"
            title="模型校验完成..."
            @click="toPathControl(scope.row)"
          ></i>
          <i
            v-else-if="scope.row.Status == 31"
            class="iconfont icon-yun--tianchong1"
            style="color: #f56c6c; cursor: pointer; fontsize: 18px"
            title="同步到数据中心出问题..."
            @click="toPathControl(scope.row)"
          ></i>
          <i
            v-else-if="scope.row.Status == 21"
            class="iconfont icon-yun--tianchong1"
            style="color: #f56c6c; cursor: pointer; fontsize: 18px"
            title="模型数据导出出问题..."
            @click="toPathControl(scope.row)"
          ></i>
          <i
            v-else
            class="iconfont icon-yun--tianchong2"
            style="color: #e6a23c; cursor: pointer; fontsize: 18px"
            title="模型校验进行中..."
            @click="toPathControl(scope.row)"
          ></i>
          <span style="margin-left: 10px">{{ scope.row.FloorName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="Note"
        label="备注"
        :show-overflow-tooltip="true"
        width="240"
      ></el-table-column>
      <el-table-column label="版本号">
        <template slot-scope="scope">
          <span style="margin-right: 5px">{{ scope.row.Version }}</span>
          <i
            v-show="scope.row.Version && scope.row.Status == 4"
            class="iconfont icon-warn"
            style="cursor: pointer; position: relative; top: 1px"
            title="查看版本更新信息"
            @click="handleClickVersion(scope.row)"
          ></i>
        </template>
      </el-table-column>
      <el-table-column prop="RevitVersion" label="revit版本"></el-table-column>
      <el-table-column
        prop="AcceptTime"
        label="上传时间"
        width="200"
      ></el-table-column>
      <el-table-column prop="UserName" label="上传人"></el-table-column>
      <el-table-column prop="address" align="center" label="操作" width="240">
        <template slot-scope="scope">
          <div class="operate" v-show="scope.row.Status == 4">
            <el-button
              title="下载模型"
              type="primary"
              size="mini"
              class="iconfont icon-download"
              @click="downloadModel(scope.row)"
            ></el-button>
            <el-button
              title="替换模型"
              type="primary"
              size="mini"
              class="iconfont icon-replace"
              @click="repliaceModel(scope.row)"
            ></el-button>
            <el-button
              title="查看版本日志"
              type="primary"
              size="mini"
              class="iconfont icon-Log"
              @click="queryModelLog(scope.row)"
            ></el-button>
            <el-button
              title="下载BIMID模型"
              type="primary"
              size="mini"
              class="el-icon-download"
              @click="downloadModelBIMID(scope.row)"
            ></el-button>
          </div>
          <div :class="['upLoad-loading']" v-show="scope.row.Status != 4">
            <div class="progress">
              <el-progress
                :text-inside="false"
                :stroke-width="20"
                :percentage="100"
                :color="scope.row.Status ? '#909399' : '#67C23A'"
              ></el-progress>
            </div>
            <div class="progress-right">
              <span v-if="!scope.row.Status">上传中...</span>
              <span v-else-if="scope.row.Status == 1">等待检查...</span>
              <span v-else>模型检查中...</span>

              <!-- <span v-show="!scope.row.Status">上传中...</span>
              <span v-show="scope.row.Status == 1">等待检查...</span>
              <span v-show="scope.row.Status == 10">模型检查中...</span>
              <span v-show="scope.row.Status == 11">未通过检查</span>
              <span v-show="scope.row.Status == 2 || scope.row.Status == 20">等待数据导出...</span>
              <span v-show="scope.row.Status == 21">模型数据导出失败</span>
              <span v-show="scope.row.Status == 3">处理导出数据中...</span>
              <span v-show="scope.row.Status == 31">同步到数据中心失败</span> -->
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <version-dialog
      :dialogVisible.sync="dialogVisible"
      :modelFile="modelFile"
      ref="addSpaceDialog"
    ></version-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import versionDialog from "@/components/model/file/versionDialog";
export default {
  components: {
    versionDialog,
  },
  props: {
    tableData: Array,
    persentList: Array,
    modelFolderName: String,
  },
  data() {
    return {
      maxHeight: 0,
      dialogVisible: false,
      modelFile: null,
    };
  },
  computed: {
    ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret"]),
  },
  methods: {
    // 查看日志
    queryModelLog(item) {
      this.$emit("openModelLog", item);
    },
    // 查看版本信息
    handleClickVersion(item) {
      this.modelFile = item;
      this.dialogVisible = true;
    },
    // 替换日志
    repliaceModel(item) {
      if (item.Status != 4) {
        this.$alert("正在识别模型对象，请稍后再替换。", "替换模型", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
      } else {
        this.$emit("replaceModel", item);
      }
    },
    filterTag(Id, precent) {
      this.$refs.filterTable.data.map((item) => {
        if (item.Id == Id) {
          if (precent >= 100) {
            // 如过precent == 100 不能关闭进度条，
            if (precent == 100) {
              item.precent = 99;
            } else if (precent == 101) {
              // 如过precent == 101 则返回结果为suceess 不能关闭进度条，
              item.precent = 100;
              this.$emit("percentFinish");
            }
            return;
          } else {
            item.precent = precent;
          }
        }
      });
    },
    // 下载模型文件
    downloadModel(item) {
      let url =
        item.FetchUrl ||
        (item.Url.match(/(\/image-service\S*)$/g)
          ? item.Url.match(/(\/image-service\S*)$/g)[0]
          : "");
      if (url) {
        let a = document.createElement("a");
        a.href = url;
        a.download = `${this.modelFolderName}${item.FloorName}模型文件v${item.Version}.rvt`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      } else {
        this.$message({
          message: "该文件夹下没有资源",
          type: "error",
        });
      }
    },
    // 下载BIMID模型文件
    downloadModelBIMID(item) {
      let url =
        item.FetchUrl ||
        (item.Url.match(/(\/image-service\S*)$/g)
          ? item.Url.match(/(\/image-service\S*)$/g)[0]
          : "");
      if (url) {
        let a = document.createElement("a");
        a.href = url;
        a.download = `${this.projectId}${item.FolderId}${item.FloorName}.rvt`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      } else {
        this.$message({
          message: "该文件夹下没有资源",
          type: "error",
        });
      }
    },
    // 停止上传
    closeUpdate(item) {
      if (this.userInfo.userName == item.UserName) {
        this.$emit("closeUpdateFile", item);
      } else {
        this.$message({
          message: "您不是该文件的上传者，不能停止该文件上传！",
          type: "error",
        });
      }
    },
    // 跳转至模型流程处理监控
    toPathControl(row) {
      this.$router.push({
        path: "/model/path",
        query: {
          Id: row.CurrentModelId,
          Size: row.Size,
          OriginalName: row.OriginalName,
        },
      });
    },
  },
  watch: {
    persentList: {
      immediate: true,
      deep: true,
      handler: function (val, oldVal) {
        if (val.length != 0) {
          val.map((item) => {
            if (item.precent != 0) {
              this.filterTag(item.Id, item.precent);
            }
          });
        }
      },
    },
  },
};
</script>
<style scoped lang="less">
.box-card {
  height: 100%;
  .filterTable-container {
    height: calc(100% - 54px);
    margin-bottom: 8px;
  }
  .operate {
    .iconfont {
      font-size: 12px;
      padding: 7px 12px;
    }
  }
  .icon-termination {
    color: #f56c6c;
    background: #fff;
    padding: 0;
    border: 0;
    font-size: 20px;
    margin-left: 5px;
  }
  .upLoad {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 0;
    .progress {
      // width: 150px;
      width: 175px;
      height: 20px;
    }
    .progress-right {
      height: 20px;
      line-height: 20px;
    }
  }
  .upLoad-loading {
    position: relative;
    justify-content: center;
    .progress {
      width: 220px;
      height: 20px;
    }
    .progress-right {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
  }
}
/deep/ .el-icon-warning {
  display: none;
  // color: transparent;
}
/deep/ .el-progress__text {
  display: none;
}
/deep/ .upLoad-loading .el-progress-bar {
  padding-right: 44px;
  margin-right: -44px;
}
/deep/ .el-progress-bar__inner {
  text-align: center;
}







</style>