caseEditor/src/view/case/photos/index.vue

<template>
  <div class="photo">
    <div class="left">
      <div class="upload">
        <el-button type="primary" @click="addCaseFileHandler">
          上传照片
        </el-button>
        <el-button
          type="primary"
          @click="sortType = !sortType"
          :icon="sortType ? FullScreen : Menu"
          >{{ sortType ? "横排" : "竖排" }}</el-button
        >
      </div>
      <draggable
        ref="childRef"
        :caseId="caseId"
        :sortType="sortType"
        @changeList="changeList"
        @handleItem="handleItem"
      />
    </div>
    <div class="right">
      <div class="tools">
        <el-button @click="handleMark">标注方向</el-button>
        <el-button @click="handleLine">标注连线</el-button>
        <el-button @click="handleSave">保存</el-button>
      </div>
      <swiper
        class="swiper"
        v-if="false"
        slides-per-view="auto"
        :space-between="24"
        :centeredSlides="true"
        @swiper="onSwiper"
        style="height: 100%"
        @slideChange="onSlideChange"
      >
        <swiper-slide
          class="swiperItem"
          v-for="(item, index) in newlist"
          :key="index"
        >
          <div class="swiperList">
            <div
              class="itemper"
              :class="{ oneItemper: sortType }"
              v-for="eleItem in item"
              :key="eleItem"
            >
              <img class="itemImg" :src="eleItem.imgUrl" alt="" />
              <div class="text">{{ eleItem.imgInfo }}</div>
            </div>
            <div class="page">
              <span style="margin-right: 16px">第 {{ index + 1 }} 页</span>
              <span>共 {{ newlist.length }} 页</span>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <canvas id="canvas" v-show="true"></canvas>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Menu, FullScreen } from "@element-plus/icons-vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
// import { addCaseFile } from "@/store/caseFile";
import { addCaseImgFile } from "../quisk";
import { saveCaseImgTagData } from "@/store/case";
import Scene from "@/core/Scene.js";
import draggable from "./draggable.vue";
const props = defineProps({ caseId: Number });
const newlist = ref([]);
const swiperRef = ref(null);
const childRef = ref(null);
const caseId = ref(props.caseId);
const sortType = ref(false);
let scene = null;

const addCaseFileHandler = async () => {
  await addCaseImgFile({
    caseId: caseId.value,
    data: {
      imgUrl: "",
      imgInfo: "",
      id: "",
      sort: "",
    },
  });
  refresh();
};
function refresh() {
  console.log("changeList", childRef.value);
  if (childRef.value) {
    childRef.value.getList();
  }
}
const changeList = (list) => {
  let newList = [];
  list.map((item, index) => {
    if (sortType.value) {
      newList.push([item]);
    } else {
      if (index % 2 == 0) {
        let newItem = list[index + 1] ? [item, list[index + 1]] : [item];
        newList.push(newItem);
      }
    }
  });
  newlist.value = newList;
  const arr = [];
  newList.map((i) => arr.push(JSON.parse(JSON.stringify(i))));
  const type = sortType.value ? 2 : 1;
  if (scene) {
    scene.load(arr, type);
    console.log("changeList", arr, type);
  }
};
const renderCanvas = () => {
  const canvas = document.getElementById("canvas");
  // console.log(canvas)
  scene = new Scene(canvas);
  scene.init();
  window.scene = scene;
};
const onSwiper = (swiper) => {
  console.log("onSwiper");
  swiperRef.value = swiper;
};
const onSlideChange = (swiper) => {
  console.log(swiper);
};
const handleItem = (item) => {
  let active = sortType.value ? item : Math.floor(item / 2);
  swiperRef.value.slideTo(active);
  console.log("handleItem", item, active);
};
const handleDetele = async (item) => {
  if (
    await confirm("删除该场景，将同时从案件和融合模型中移除，确定要删除吗？")
  ) {
    const scenes = getCaseScenes(list.value.filter((item) => item !== scene));
    await replaceCaseScenes(props.caseId, scenes);
    refresh();
  }
};
const handleMark = () => {
  if (window.scene) {
    window.scene.player.setMode(2);
  }
};
const handleLine = () => {
  if (window.scene) {
    window.scene.player.setMode(1);
  }
};
const handleSave = () => {
  if (window.scene) {
  }
};
onMounted(() => {
  renderCanvas();
});
</script>
<style lang="scss" scoped>
#canvas {
  width: 100%;
  height: 100%;
}

.photo {
  display: flex;
  height: 100%;

  .left {
    width: 260px;
    padding: 16px 24px 30px 0;
    height: calc(100% - 46.16px);
    overflow-y: auto;
    background: #ffffff;
    box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    // box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
  }

  .right {
    width: calc(100% - 260px);
    background-color: var(--bgColor);
    padding-left: 24px;
    height: calc(100% - 0px);
    position: relative;

    .tools {
      position: absolute;
      top: 15px;
      left: 30px;
    }

    .swiperItem {
      height: calc(100vh - 155.16px);
      width: calc((100vh - 156.16px) * 0.707);
      background: #ffffff;

      .swiperList {
        padding: 0 60px;
        height: 100%;

        .page {
          font-weight: 400;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 22px;
          text-align: right;
          margin-top: 30px;
        }

        .itemper {
          height: calc(50% - 100px);
          padding: 60px 0 0 0;

          .text {
            margin-top: 16px;
            border-radius: 0px 0px 0px 0px;
            border: 1px dotted #cccccc;
            text-align: center;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            line-height: 30px;
            color: rgba(0, 0, 0, 0.85);
          }

          .itemImg {
            width: 100%;
            height: calc(100% - 48px);
            display: block;
            object-fit: cover;
          }
        }

        .oneItemper {
          height: calc(100% - 120px);

          .itemImg {
          }
        }
      }
    }
  }
}
</style>