fix: 初始化之后可以关闭

.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

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"

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>

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

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>

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: {

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'

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)

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<{

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()

src/components/home/SavePhoto/index.vue

@@ -49,6 +49,7 @@ const okHandle = async () => {
     console.log(e)
   }
 }
+
 const cancel = () => {
   emits('cancel')
 }

src/env.d.ts

@@ -19,3 +19,4 @@ declare module '*.vue' {
   export default component
 }
 declare module 'lodash'
+declare module 'photo-view'

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,

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)

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 => ({

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

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 () => {

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)

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>
 

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()

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)