From 5e65b15e6b031b4bbc25a6fe2faf4c65e9bf5699 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Mon, 21 Jul 2025 11:36:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=9D=E5=A7=8B=E5=8C=96=E4=B9=8B?=
 =?UTF-8?q?=E5=90=8E=E5=8F=AF=E4=BB=A5=E5=85=B3=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.test                                      |  4 +-
 package.json                                   |  5 +++
 src/components/check/index.vue                 |  2 +-
 src/components/check1/index.vue                |  2 +-
 src/components/common/FTPhotoPreview/index.vue | 53 ++++++++++++++++++++++++++
 src/components/container/Item/index.vue        |  2 +-
 src/components/craft/AddCraftDialog.vue        |  2 +-
 src/components/craft/CraftStatus.vue           |  2 +-
 src/components/craft/TransferRight.vue         |  2 +-
 src/components/exit/index.vue                  |  6 +--
 src/components/home/SavePhoto/index.vue        |  1 +
 src/env.d.ts                                   |  1 +
 src/libs/http.ts                               |  2 +-
 src/main.ts                                    | 13 +++++++
 src/stores/systemStore.ts                      |  2 +-
 src/types/craft.d.ts                           |  2 +
 src/views/container/index.vue                  |  4 +-
 src/views/craft/index.vue                      |  6 +--
 src/views/home/index.vue                       | 12 +++++-
 src/views/ore/index.vue                        |  2 +-
 src/views/solution/index.vue                   |  2 +-
 21 files changed, 106 insertions(+), 21 deletions(-)
 create mode 100644 src/components/common/FTPhotoPreview/index.vue

diff --git a/.env.test b/.env.test
index 2822908..d6d885b 100644
--- a/.env.test
+++ b/.env.test
@@ -2,6 +2,6 @@
 
 FT_NODE_ENV=test
 
-FT_WS_URL=ws://192.168.1.199:8080/ws
-FT_PROXY=http://192.168.1.199:8080
+FT_WS_URL=ws://192.168.73.170:8080/ws
+FT_PROXY=http://192.168.73.170:8080
 FT_API_BASE=/api
\ No newline at end of file
diff --git a/package.json b/package.json
index ba158e3..ef5232b 100644
--- a/package.json
+++ b/package.json
@@ -32,8 +32,10 @@
     "cssnano": "^7.0.6",
     "element-plus": "^2.9.5",
     "express": "^5.1.0",
+    "images-viewer-vue3": "^1.0.37",
     "konva": "^9.3.18",
     "lodash": "^4.17.21",
+    "photo-view": "^2.0.3",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.2.0",
     "postcss": "^8.5.3",
@@ -44,6 +46,9 @@
     "postcss-viewport-units": "^0.1.6",
     "postcss-write-svg": "^3.0.1",
     "tdesign-mobile-vue": "^1.9.0",
+    "v-viewer": "^3.0.21",
+    "vant": "^4.9.20",
+    "viewerjs": "^1.11.7",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "ws": "^8.18.1"
diff --git a/src/components/check/index.vue b/src/components/check/index.vue
index 44fcd92..863a322 100644
--- a/src/components/check/index.vue
+++ b/src/components/check/index.vue
@@ -257,7 +257,7 @@ const checkHandle1 = async () => {
         <FtButton v-if="activeStep === 1 && percentage === 100" type="primary" :click-handle="checkHandle1">
           下一步
         </FtButton>
-        <FtButton v-if="activeStep === 2" :click-handle="onConfirm">
+        <FtButton v-if="activeStep !== 0 " :click-handle="onConfirm">
           关闭
         </FtButton>
       </div>
diff --git a/src/components/check1/index.vue b/src/components/check1/index.vue
index 875adba..2855fd7 100644
--- a/src/components/check1/index.vue
+++ b/src/components/check1/index.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
+import { getSelfFinish, getSelfStatus } from '@/apis/self'
 import { ElMessage } from 'element-plus'
 import { socket } from 'libs/socket'
 import { useHomeStore } from 'stores/homeStore'
 import { useSystemStore } from 'stores/systemStore'
 import { onMounted, onUnmounted, ref } from 'vue'
-import { getSelfFinish, getSelfStatus } from '@/apis/self'
 
 interface SelfStatus {
   name: string
diff --git a/src/components/common/FTPhotoPreview/index.vue b/src/components/common/FTPhotoPreview/index.vue
new file mode 100644
index 0000000..984d396
--- /dev/null
+++ b/src/components/common/FTPhotoPreview/index.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import PhotoView from 'photo-view'
+import { ref } from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+})
+
+const container = ref<HTMLElement | null>(null)
+
+const handleClick = () => {
+  if (!props.src) {
+    return
+  }
+
+  // eslint-disable-next-line no-new
+  new PhotoView(container.value as HTMLElement, {
+    images: [props.src],
+    index: 0,
+    loop: false,
+    navbar: true,
+    toolbar: true,
+    movable: true,
+    zoomable: true,
+    transition: true,
+    backdrop: true,
+    fullscreen: true,
+  })
+}
+</script>
+
+<template>
+  <teleport to="body">
+    <div ref="container" class="photo-preview-container">
+      <img :src="src" @click="handleClick">
+    </div>
+  </teleport>
+</template>
+
+<style scoped>
+.photo-preview-container {
+  position: absolute;
+  display: inline-block;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+</style>
diff --git a/src/components/container/Item/index.vue b/src/components/container/Item/index.vue
index 998477a..8ae9ef1 100644
--- a/src/components/container/Item/index.vue
+++ b/src/components/container/Item/index.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { updateContainer } from '@/apis/container'
 import { Plus } from '@element-plus/icons-vue'
 import { FtMessage } from 'libs/message'
 import { computed, ref } from 'vue'
-import { updateContainer } from '@/apis/container'
 
 const props = defineProps({
   itemIndex: {
diff --git a/src/components/craft/AddCraftDialog.vue b/src/components/craft/AddCraftDialog.vue
index 4a8e21c..8d5ead5 100644
--- a/src/components/craft/AddCraftDialog.vue
+++ b/src/components/craft/AddCraftDialog.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { createCraft, updateCraft } from '@/apis/crafts'
 import { ElMessage } from 'element-plus'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { createCraft, updateCraft } from '@/apis/crafts'
 import { StepCmdDescMap } from '../../views/craft/craft_constant'
 import FtButton from '../common/FTButton/index.vue'
 import FTDialog from '../common/FTDialog/index.vue'
diff --git a/src/components/craft/CraftStatus.vue b/src/components/craft/CraftStatus.vue
index 0fe49d0..65a55b5 100644
--- a/src/components/craft/CraftStatus.vue
+++ b/src/components/craft/CraftStatus.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { craftstatus, craftstatusByHeatId, stopCraft } from '@/apis/crafts'
 import { ElMessage } from 'element-plus'
 import { nextTick, ref } from 'vue'
-import { craftstatus, craftstatusByHeatId, stopCraft } from '@/apis/crafts'
 import TransferRight from './TransferRight.vue'
 
 const statusVisible = ref(false)
diff --git a/src/components/craft/TransferRight.vue b/src/components/craft/TransferRight.vue
index 78835e8..b504478 100644
--- a/src/components/craft/TransferRight.vue
+++ b/src/components/craft/TransferRight.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
 import { getContainerList } from '@/apis/container'
 import { getSolsList } from '@/apis/solution'
 import { useSolutionStore } from '@/stores/useSolutionStore'
+import { onMounted, ref, watch } from 'vue'
 import { StepCmdDescMap, tubeSolList } from '../../views/craft/craft_constant'
 
 const props = defineProps<{
diff --git a/src/components/exit/index.vue b/src/components/exit/index.vue
index 89c0493..0bd46b0 100644
--- a/src/components/exit/index.vue
+++ b/src/components/exit/index.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
+import deviceSvg from '@/assets/images/init-device.svg'
+import CancelSvg from '@/assets/images/user-cancel.svg'
+import LogoutSvg from '@/assets/images/user-logout.svg'
 import { logout } from 'apis/login'
 import Check from 'components/check/index.vue'
 import { delToken } from 'libs/token'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import deviceSvg from '@/assets/images/init-device.svg'
-import CancelSvg from '@/assets/images/user-cancel.svg'
-import LogoutSvg from '@/assets/images/user-logout.svg'
 
 const isLoading = ref(false)
 const router = useRouter()
diff --git a/src/components/home/SavePhoto/index.vue b/src/components/home/SavePhoto/index.vue
index fc7279f..4098b26 100644
--- a/src/components/home/SavePhoto/index.vue
+++ b/src/components/home/SavePhoto/index.vue
@@ -49,6 +49,7 @@ const okHandle = async () => {
     console.log(e)
   }
 }
+
 const cancel = () => {
   emits('cancel')
 }
diff --git a/src/env.d.ts b/src/env.d.ts
index 5e0759d..351e133 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -19,3 +19,4 @@ declare module '*.vue' {
   export default component
 }
 declare module 'lodash'
+declare module 'photo-view'
diff --git a/src/libs/http.ts b/src/libs/http.ts
index 42dc3a1..c0c0fe7 100644
--- a/src/libs/http.ts
+++ b/src/libs/http.ts
@@ -1,7 +1,7 @@
+import { HEADER_TOKEN_KEY } from '@/libs/constant'
 import axios from 'axios'
 import { FtMessage } from 'libs/message'
 import { getToken } from 'libs/token'
-import { HEADER_TOKEN_KEY } from '@/libs/constant'
 
 const http = axios.create({
   baseURL: import.meta.env.FT_API_BASE,
diff --git a/src/main.ts b/src/main.ts
index 6d0810a..dc30766 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import FtStream from 'components/common/FTStream/index.vue'
 import FtTable from 'components/common/FTTable/index.vue'
 import ElementPlus from 'element-plus'
 import locale from 'element-plus/es/locale/lang/zh-cn'
+import ImagesViewerVue3 from 'images-viewer-vue3'
 import pinia from 'stores/index'
 import { createApp } from 'vue'
 import App from './app.vue'
@@ -17,6 +18,18 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 app.use(pinia)
+app.use(ImagesViewerVue3, {
+  zIndex: 999, // Default 999
+  language: 'zh-cn', // Default language 'zh'
+  scaleRatio: 1, // Default 1
+  rotateRatio: 90, // Default 90 degrees
+  isEnableDrag: true, // Enabled by default
+  isEnableWheel: true, // Enabled by default
+  playSpeed: 2000, // playSpeed Default 2000 ms
+  isDownLoad: true, // Enabled by default
+  isHiddenSiderNav: false, // Enabled by default
+  isHiddenSearch: false, // Disable by default
+})
 app.component('FtTable', FtTable)
 app.component('FtButton', FtButton)
 app.component('FtDialog', FtDialog)
diff --git a/src/stores/systemStore.ts b/src/stores/systemStore.ts
index 22ea582..b9f49bd 100644
--- a/src/stores/systemStore.ts
+++ b/src/stores/systemStore.ts
@@ -1,7 +1,7 @@
+import router from '@/router'
 import { logout } from 'apis/login'
 import { delToken } from 'libs/token'
 import { defineStore } from 'pinia'
-import router from '@/router'
 
 export const useSystemStore = defineStore('system', {
   state: (): System.SystemStore => ({
diff --git a/src/types/craft.d.ts b/src/types/craft.d.ts
index d4b9160..1c9bfa1 100644
--- a/src/types/craft.d.ts
+++ b/src/types/craft.d.ts
@@ -101,6 +101,7 @@ declare namespace CraftTypes {
   interface HeatParams { temperature?: number, second?: number, description?: string, minutes?: number, seconds?: number }
   interface DryParams { second?: number, description?: string }
   interface AnnealParams {}
+  interface DelayParams {}
 
   type StepParam
     = | { method: 'preHeat', params: PreHeatParams }
@@ -108,6 +109,7 @@ declare namespace CraftTypes {
       | { method: 'startHeating', params: HeatParams }
       | { method: 'shaking', params: DryParams }
       | { method: 'takePhoto', params: AnnealParams }
+      | { method: 'delay', params: DelayParams }
 
   interface StepItem {
     name: string
diff --git a/src/views/container/index.vue b/src/views/container/index.vue
index a91f312..7af489b 100644
--- a/src/views/container/index.vue
+++ b/src/views/container/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import liquidItem from 'components/container/Item/index.vue'
-import { onMounted, ref } from 'vue'
 import { getContainerList } from '@/apis/container'
 import { getSolsList } from '@/apis/solution'
 import { useSolutionStore } from '@/stores/useSolutionStore'
+import liquidItem from 'components/container/Item/index.vue'
+import { onMounted, ref } from 'vue'
 
 const chemicalList = ref<Container.ContainerItem[]>([])
 onMounted(async () => {
diff --git a/src/views/craft/index.vue b/src/views/craft/index.vue
index 14bb359..3ce5fe8 100644
--- a/src/views/craft/index.vue
+++ b/src/views/craft/index.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
 import { delCraft, getCraftList, setCraft, startCraft } from '@/apis/crafts'
 import AddCraft from '@/components/craft/AddCraft/index.vue'
 import AddCraftDialog from '@/components/craft/AddCraftDialog.vue'
 import CraftStatus from '@/components/craft/CraftStatus.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 const tableData = ref<CraftTypes.Craft[]>([])
 const addCraftRef = ref<CraftTypes.AddCraftType | null>(null)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index d5c56e6..c1b945d 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -15,6 +15,7 @@ import { cmdNameMap, formatDateTime } from 'libs/utils'
 import { useHomeStore } from 'stores/homeStore'
 import { useSystemStore } from 'stores/systemStore'
 import { ImageViewer as TImageViewer } from 'tdesign-mobile-vue'
+import { showImagePreview } from 'vant'
 import { onMounted, onUnmounted, provide, ref } from 'vue'
 
 const homeStore = useHomeStore()
@@ -313,7 +314,7 @@ const warmUpStart = async () => {
 
 const lightVisible = ref(false)
 
-const photoUrl = ref('')
+const photoUrl = ref('https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg')
 
 const take_photo = async () => {
   const params = {
@@ -333,6 +334,14 @@ const previewHandle = () => {
   }
   useHomeStore().photos = [photoUrl.value]
   useHomeStore().previewVisible = true
+  showImagePreview({
+    images: [
+      photoUrl.value,
+    ],
+    startPosition: 0,
+    loop: false,
+    swipeDuration: 0,
+  })
 }
 </script>
 
@@ -497,6 +506,7 @@ const previewHandle = () => {
     <AddLiquid v-if="addLiquidVisible" @ok="addLiquidVisible = false" @cancel="addLiquidVisible = false" />
     <FillSolution v-if="fillSolutionVisible" @ok="fillSolutionVisible = false" @cancel="fillSolutionVisible = false" />
     <TImageViewer v-model:images="homeStore.photos" v-model:visible="homeStore.previewVisible" style="z-index: 9000" />
+    <!--    <FtPhotoPreview v-if="homeStore.previewVisible" :src="homeStore.photos[0]" /> -->
   </div>
 </template>
 
diff --git a/src/views/ore/index.vue b/src/views/ore/index.vue
index 800b5cb..28d975e 100644
--- a/src/views/ore/index.vue
+++ b/src/views/ore/index.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { delOre, editOre, getOreList, saveOre } from '@/apis/ore'
 import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
 import { h, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { delOre, editOre, getOreList, saveOre } from '@/apis/ore'
 
 const visible = ref(false)
 const oreForm = ref()
diff --git a/src/views/solution/index.vue b/src/views/solution/index.vue
index effab57..2e5f945 100644
--- a/src/views/solution/index.vue
+++ b/src/views/solution/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { delSols, getSolsList } from '@/apis/solution'
 import Edit from 'components/solution/Edit/index.vue'
 import { ElMessageBox } from 'element-plus'
 import { FtMessage } from 'libs/message'
 import { provide, ref, useTemplateRef } from 'vue'
-import { delSols, getSolsList } from '@/apis/solution'
 
 const visible = ref(false)