caseEditor/src/view/vrmodel/modelContent.vue

<template>
  <div class="body-head">
    <h3 style="visibility: hidden">场景管理</h3>
    <el-upload
      class="upload-demo"
      :multiple="false"
      :limit="1"
      :show-file-list="false"
      :http-request="() => {}"
      :file-list="fileList"
      :class="{ disabled: percentage }"
      :before-upload="uploadCheck"
    >
      <el-button v-pdpath="'sync'" type="primary">
        <el-icon><Upload /></el-icon>{{ percentage ? "文件上传中" : "上传数据" }}
      </el-button>
    </el-upload>
  </div>

  <el-table
    :data="pagging.state.table.rows"
    tooltip-effect="dark"
    style="width: 100%"
    size="large"
  >
    <el-table-column label="序号" width="70" v-slot:default="{ $index }">
      <div style="text-align: center">
        {{ pagging.state.pag.size * (pagging.state.pag.currentPage - 1) + $index + 1 }}
      </div>
    </el-table-column>
    <el-table-column label="标题" prop="modelTitle"></el-table-column>
    <el-table-column label="原始数据格式" prop="modelDateType"></el-table-column>
    <el-table-column label="大小" prop="modelSize"></el-table-column>
    <el-table-column label="状态" v-slot:default="{ row }: { row: ModelScene }">
      {{ getStatusText(row) }}
    </el-table-column>
    <el-table-column label="操作" v-slot:default="{ row }">
      <span
        class="oper-span"
        v-pdpath="['view']"
        @click="openSceneUrl(row, OpenType.query)"
        v-if="row.createStatus === ModelSceneStatus.SUCCESS"
      >
        查看
      </span>
      <span
        class="oper-span delBtn"
        v-pdscene="row"
        @click="delOrCancel(row)"
        v-pdpath="'del'"
      >
        {{ row.createStatus !== ModelSceneStatus.RUN ? "删除" : "取消上传" }}
      </span>
    </el-table-column>
  </el-table>

  <el-dialog
    :model-value="!!percentage"
    :show-close="false"
    title="文件上传中"
    :close-on-click-modal="false"
  >
    <el-progress :percentage="percentage" />
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ModelSceneStatus,
  ModelScene,
  cancelUploadModelScene,
  uploadModelScene,
  delModelScene,
  getModelSceneStatus,
} from "@/store/scene";
import {
  ModelMaxSize,
  ModelSceneStatusDesc,
  ModelSupportFormats,
  SceneTypePaths,
} from "@/constant/scene";
import { confirm } from "@/helper/message";
import { useUpload } from "@/hook/upload";
import { ScenePagging } from "./pagging";
import { watchPolling } from "@/hook/watchPolling";
import { OpenType, openSceneUrl } from "../case/help";

const props = defineProps<{ pagging: ScenePagging }>();

const getStatusText = (scene: ModelScene) => {
  let desc = ModelSceneStatusDesc[scene.createStatus];
  if (scene.createStatus === ModelSceneStatus.RUN && scene.progress) {
    desc += ` ${scene.progress}% `;
  } else if (scene.createStatus === ModelSceneStatus.SUCCESS) {
    desc = scene.createTime;
  }
  return desc;
};

const delOrCancel = async (scene: ModelScene) => {
  const isDel = scene.createStatus !== ModelSceneStatus.RUN;
  const msg = isDel ? "确定要删除此数据？" : "确定要取消上传吗？";

  if (await confirm(msg)) {
    isDel ? await delModelScene(scene) : await cancelUploadModelScene(scene);
    props.pagging.refresh();
  }
};

const { percentage, upload: uploadCheck, fileList, removeFile } = useUpload({
  maxSize: ModelMaxSize,
  formats: ModelSupportFormats,
  upload: async (file, onPercentage) => {
    await uploadModelScene(file, onPercentage);
    props.pagging.refresh();
    removeFile();
  },
});

// 处理后台正在处理的模型类
const refreshStatus = (models: ModelScene[]) => {
  const refreshStatusAll = models.map(async (scene) => {
    const { status, progress } = await getModelSceneStatus(scene);
    scene.createStatus = status;
    scene.progress = progress;
    if (status == ModelSceneStatus.SUCCESS) {
      props.pagging.refresh();
    }
  });
  return Promise.all(refreshStatusAll);
};

watchPolling(() => {
  const payload = (props.pagging.state.table.rows as ModelScene[]).filter(
    (item) => item.createStatus === ModelSceneStatus.RUN
  );
  return { start: payload.length > 0, payload };
}, refreshStatus);
</script>