fix: 1

src/components/dialog/index.vue

@@ -1,7 +1,14 @@
 <template>
   <teleport to="#dialog">
     <div class="dialog-bg" v-if="show">
-      <div class="dialog" :style="{ width: width + 'px' }">
+      <div
+        class="dialog"
+        :class="{eh: height}"
+        :style="{
+          width: typeof width === 'number' ? width + 'px' : width,
+          height: height ? (typeof height === 'number' ? height + 'px' : height) : 'auto',
+        }"
+      >
         <div class="head">
           <h3>{{ title }}</h3>
           <el-icon @click="closeHandle" v-if="showClose || cornerClose">

src/components/dialog/style.scss

@@ -9,7 +9,6 @@
   align-items     : center;
   justify-content : center;
   z-index         : 99;
-
 }
 
 .dialog {
@@ -36,11 +35,14 @@
     }
   }
 
+  &:not(.eh) .content {
+    max-height: 600px;
+  }
+
   .content {
     padding      : 24px 30px;
     border-top   : 1px solid var(--bgColor);
     border-bottom: 1px solid var(--bgColor);
-    max-height   : 600px;
     overflow-y   : auto;
   }
 

src/components/dialog/type.ts

@@ -4,7 +4,8 @@ export type DialogProps = {
   hideFloor?: boolean;
   notSubmit?: boolean;
   enterText?: string;
-  width?: number;
+  width?: number | "string";
+  height?: number | "string";
   power?: string;
   showClose?: boolean;
   showDelete?: boolean;

src/view/case/draw/photoFuseImage.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="house-layout">
+    <div class="iframe-layout">
+      <iframe :src="fuseUrl" ref="iframeRef" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CaseTagging, getCaseTaggings } from "@/store/caseTagging";
+import {
+  getFuseImage,
+  getQuery,
+  FuseImageType,
+  fuseImageJoinHot,
+  fuseIframeHandler,
+} from "@/view/case/help";
+import { computed, nextTick, onMounted, ref, watchEffect } from "vue";
+import { QuiskExpose } from "@/helper/mount";
+import saveAs from "@/util/file-serve";
+
+export type PhotoFuseImage = { blob: Blob | null };
+const props = defineProps<{ caseId: number }>();
+
+const fuseUrl = computed(() => getQuery(props.caseId, true, true));
+const iframeRef = ref<HTMLIFrameElement>();
+
+watchEffect((onClanup) => {
+  if (iframeRef.value) {
+    onClanup(fuseIframeHandler(iframeRef.value));
+  }
+});
+
+defineExpose<QuiskExpose>({
+  async submit() {
+    const fuseImage = await getFuseImage(iframeRef.value!, 1500, 1500);
+    if (fuseImage.blob) {
+      await saveAs(fuseImage.blob, `场景拍照.png`);
+    }
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.house-layout {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 200px);
+}
+
+.iframe-layout {
+  height: 100%;
+  flex: 1;
+  iframe {
+    border: none;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.content-layout {
+  flex: none;
+  width: 360px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 40px;
+  height: 100%;
+  justify-content: space-between;
+
+  h4 {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 22px;
+    margin-bottom: 15px;
+    flex: none;
+
+    span {
+      float: right;
+    }
+  }
+
+  > .house-tags {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+
+    > .tagging-transfer {
+      flex: 1;
+      overflow: hidden;
+    }
+  }
+}
+.house-image {
+  border: 1px solid #d9d9d9;
+  padding-top: 68%;
+  position: relative;
+
+  > div {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+</style>
+
+<style lang="scss">
+.tagging-transfer {
+  .el-transfer {
+    display: flex;
+    --el-transfer-panel-body-height: 160px;
+  }
+  .el-transfer__buttons {
+    padding: 0 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    button {
+      padding: 0;
+      width: 24px;
+      height: 24px;
+      display: block;
+      margin: 5px 0;
+    }
+  }
+  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
+    font-size: 14px;
+  }
+}
+.icon {
+  cursor: pointer;
+}
+
+.value-option {
+  display: flex;
+  align-items: center;
+
+  span {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  i {
+    flex: 0 0 auto;
+  }
+}
+</style>
+
+<style>
+.value-option.dragging {
+  opacity: 0.5;
+}
+</style>

src/view/case/editMenu.vue

@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { getFuseCodeLink, checkScenesOpen, MenuItem, getSWKKSyncLink } from "./help";
-import { showCaseScenes, addCaseScenes, shareCase } from "./quisk";
+import { showCaseScenes, addCaseScenes, shareCase, photoFuseImage } from "./quisk";
 import { RouteName, router } from "@/router";
 import { getCaseSceneList } from "@/store/case";
 import { alert } from "@/helper/message";
@@ -67,6 +67,14 @@ const menus = computed(() => {
       label: "视图提取",
       onClick: () => checkScenesOpen(caseId, `${fuseLink}#sceneEdit/view`),
     },
+    {
+      key: "view",
+      label: "场景拍照",
+      onClick: async () => {
+        const data = await photoFuseImage({ caseId: props.caseId });
+        console.log(data);
+      },
+    },
     // {
     //   key: "record",
     //   label: "屏幕录制",

src/view/case/quisk.ts

@@ -6,6 +6,7 @@ import EditEshapeTable, {
 } from "./draw/editEshapeTable.vue";
 import SceneList from "./sceneList.vue";
 import SelectFuseImage, { FuseImage } from "./draw/selectFuseImage.vue";
+import PhotoFuseImageV, { PhotoFuseImage } from "./draw/photoFuseImage.vue";
 import SelectMapImage, { MapImage } from "./draw/selectMapImage.vue";
 import { quiskMountFactory } from "@/helper/mount";
 import { nextTick } from "vue";
@@ -43,6 +44,12 @@ export const selectFuseImage = quiskMountFactory(SelectFuseImage, {
   width: 1500,
 })<FuseImage>;
 
+export const photoFuseImage = quiskMountFactory(PhotoFuseImageV, {
+  title: "拍照",
+  width: window.innerWidth - 300,
+  height: window.innerHeight,
+})<PhotoFuseImage>;
+
 export const selectMapImage = quiskMountFactory(SelectMapImage, {
   title: "选择地址",
   width: 588,