4pc/src/view/artifact-scenes/index.vue

<template>
  <div class="layout">
    <div class="left">
      <div><Icon style="color: currentColor" /><span>场景管理</span></div>
    </div>
    <div class="relics-content">
      <div class="search" style="text-align: right; padding-bottom: 20px">
        <el-button type="primary" @click="gotoSplit">分屏对比</el-button>
        <el-button type="primary" plain @click="addHandler"> 添加场景 </el-button>
      </div>

      <el-table :data="scenes" border row-key="'sceneCode'">
        <slot name="table"></slot>
        <el-table-column label="场景标题" v-slot:default="{ row }">
          <a class="link" @click="gotoScene(row, false)">
            <TexToolTip :text="row.name" />
          </a>
        </el-table-column>

        <el-table-column label="场景码" v-slot:default="{ row }">
          <TexToolTip :text="row.num" />
        </el-table-column>
        <el-table-column label="点位数量" v-slot:default="{ row }">
          <TexToolTip :text="row.shootCount || '-'" />
        </el-table-column>
        <!-- <el-table-column
        label="设备类型"
        prop="snCode"
        v-slot:default="{ row }"
      >
        <TexToolTip :text="DeviceTypeDesc[row.cameraType as DeviceType]" />
      </el-table-column> -->
        <el-table-column label="拍摄时间" prop="algorithmTime" v-slot:default="{ row }">
          <TexToolTip :text="row.shootTime && row.shootTime.substr(0, 16)" />
        </el-table-column>

        <el-table-column label="计算完成时间" prop="createTime" v-slot:default="{ row }">
          <TexToolTip :text="row.algorithmTime && row.algorithmTime.substr(0, 16)" />
        </el-table-column>

        <el-table-column label="状态" v-slot:default="{ row }">
          <TexToolTip :text="SceneStatusDesc[(row.calcStatus as SceneStatus)]" />
        </el-table-column>

        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="gotoScene(row, false)">
              查看
            </el-button>
            <el-button link type="primary" size="small" @click="gotoScene(row, true)">
              编辑
            </el-button>
            <el-button
              link
              type="danger"
              @click="delHandler(row)"
              size="small"
              v-if="row.calcStatus !== SceneStatus.RUN"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import Icon from "@/assets/icon/cjgl_active.svg";
import Layout from "@/view/layout/nav.vue";
import TexToolTip from "@/components/tex-tooltip.vue";
import {
  gotoScene,
  Scene,
  SceneStatus,
  SceneStatusDesc,
  SceneType,
  SceneTypeDesc,
} from "@/store/scene";
import { dateFormat } from "@/util";
import { computed, onUnmounted, ref, watch } from "vue";
import { router, setDocTitle } from "@/router";
import { delSceneFetch, repSceneFetch, sendFetch } from "@/request";
import { ElMessageBox } from "element-plus";
import { selectScenes } from "../quisk";
import { sysTitle } from "../layout/var";

const scenes = ref<Scene[]>([]);
const relicsId = computed(() => (router.currentRoute.value.params.id as unknown) as any);
const fetchScenes = async () => {
  if (!relicsId.value) {
    return;
  }
  const res: any = await sendFetch(`/relics/artifact/getInfo/${relicsId.value}`, {});
  if (!res) {
    return router.replace({ name: "scene" });
  }
  setDocTitle(res.projectName);

  sysTitle.value = res.projectName;
  scenes.value = res.sceneList.map((item) => ({
    ...item,
    sceneCode: item.num,
    sceneSource: SceneType.CLUNT,
  }));
};
onUnmounted(() => (sysTitle.value = ""));
watch(relicsId, fetchScenes, { immediate: true });

const delHandler = async (scene: Scene) => {
  const ok = await ElMessageBox.confirm("确定要删除吗", {
    type: "warning",
  });
  if (ok) {
    await delSceneFetch(relicsId.value, scene.sceneCode);
    await fetchScenes();
  }
};

const addHandler = async () => {
  await selectScenes({
    scenes: scenes.value,
    selfScenes: scenes.value.filter((scene) => scene.creationMethod === 2),
    submit: async (nScene) => {
      const numList = nScene.map((s) => s.sceneCode);
      await repSceneFetch(relicsId.value, numList);
      await fetchScenes();
    },
  });
};

const gotoSplit = () => {
  window.open(
    router.resolve({ name: "query-relics-scene", params: { relicsId: relicsId.value } })
      .href
  );
};
</script>

<style scoped lang="scss">
.layout {
  display: flex;
  width: 100%;
  height: 100%;
}
.left {
  font-size: 18px;
  padding: 20px;
  width: 200px;
  flex: 0 0 auto;
  border-right: 1px solid var(--el-border-color);
  color: var(--el-menu-active-color);

  div {
    font-size: var(--el-menu-item-font-size);
    align-items: center;
    display: flex;
  }

  span {
    margin-left: 8px;
  }
}
.relics-content {
  margin: 8px;
  flex: 1;
}
</style>

<style>
.left path {
  fill: currentColor;
}
</style>