fix: 照片预览

src/assets/styles/element.scss

@@ -58,4 +58,8 @@
     }
   }
 
+}
+
+.t-image-viewer {
+  z-index: 9999;
 }

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/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/AddCraft/index.vue

@@ -87,9 +87,15 @@ const okHandle = async () => {
           if (step.params.hours || step.params.minutes || step.params.seconds) {
             step.params.second = (step.params.hours || 0) * 3600 + (step.params.minutes || 0) * 60 + (step.params.seconds || 0) || undefined
           }
+          else {
+            step.params.second = undefined
+          }
           if (step.params.coolingHours || step.params.coolingMinutes || step.params.coolingSeconds) {
             step.params.coolingSecond = (step.params.coolingHours || 0) * 3600 + (step.params.coolingMinutes || 0) * 60 + (step.params.coolingSeconds || 0) || undefined
           }
+          else {
+            step.params.coolingSecond = undefined
+          }
         }
         step.params.description = `${index + 1}.`
         switch (step.method) {

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/EditPhoto/index.vue

@@ -2,7 +2,7 @@
 import { getPhoto, savePhoto } from 'apis/home'
 import { getOreList } from 'apis/ore'
 import { FtMessage } from 'libs/message'
-import { ImageViewer as TImageViewer } from 'tdesign-mobile-vue'
+import { useHomeStore } from 'stores/homeStore'
 import { onMounted, ref } from 'vue'
 
 const props = defineProps({
@@ -73,14 +73,13 @@ const mousedownHandle = async (e: Event) => {
 
 const activeTube = ref(Array.from({ length: 16 }).fill(false))
 
-const previewVisible = ref(false)
-const photos = ref<string[]>([])
 const previewHandle = () => {
+  const homeStore = useHomeStore()
   if (!form.value.url) {
     return
   }
-  photos.value = [form.value.url]
-  previewVisible.value = true
+  homeStore.photos = [form.value.url]
+  homeStore.previewVisible = true
 }
 </script>
 
@@ -118,7 +117,6 @@ const previewHandle = () => {
         </el-input>
       </el-form-item>
     </el-form>
-    <TImageViewer v-model:images="photos" v-model:visible="previewVisible" />
   </FtDialog>
 </template>
 

src/components/home/SavePhoto/index.vue

@@ -2,7 +2,7 @@
 import { savePhoto } from 'apis/home'
 import { getOreList } from 'apis/ore'
 import { FtMessage } from 'libs/message'
-import { ImageViewer as TImageViewer } from 'tdesign-mobile-vue'
+import { useHomeStore } from 'stores/homeStore'
 import { onMounted, ref } from 'vue'
 
 const props = defineProps({
@@ -69,14 +69,14 @@ const mousedownHandle = async (e: Event) => {
 }
 
 const activeTube = ref(Array.from({ length: 16 }).fill(false))
-const previewVisible = ref(false)
-const photos = ref<string[]>([])
+
 const previewHandle = () => {
+  const homeStore = useHomeStore()
   if (!props.url) {
     return
   }
-  photos.value = [props.url]
-  previewVisible.value = true
+  homeStore.photos = [props.url]
+  homeStore.previewVisible = true
 }
 </script>
 
@@ -114,7 +114,6 @@ const previewHandle = () => {
         </el-input>
       </el-form-item>
     </el-form>
-    <TImageViewer v-model:images="photos" v-model:visible="previewVisible" />
   </FtDialog>
 </template>
 

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/stores/homeStore.ts

@@ -38,6 +38,8 @@ export const useHomeStore = defineStore('home', {
         selected: false,
       },
     ],
+    photos: [],
+    previewVisible: false,
   }),
   actions: {
     selectChange(index: number) {

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

@@ -52,17 +52,17 @@ declare namespace CraftTypes {
       second: number
     }
   }
-  export type StepStruct =
-    | UpTrayStepStruct
-    | DownTrayStepStruct
-    | AddLiquidStepStruct
-    | MoveToSolStepStruct
-    | MoveToHeaterStepStruct
-    | ShakingStepStruct
-    | StartHeatingStepStruct
-    | StopHeatingStepStruct
-    | TakePhotoStepStruct
-    | DelayStepStruct
+  export type StepStruct
+    = | UpTrayStepStruct
+      | DownTrayStepStruct
+      | AddLiquidStepStruct
+      | MoveToSolStepStruct
+      | MoveToHeaterStepStruct
+      | ShakingStepStruct
+      | StartHeatingStepStruct
+      | StopHeatingStepStruct
+      | TakePhotoStepStruct
+      | DelayStepStruct
   type StepCmd = StepStruct['method']
   interface AddCraftType {
     openDialog: () => void
@@ -102,12 +102,12 @@ declare namespace CraftTypes {
   interface DryParams { second?: number, description?: string }
   interface AnnealParams {}
 
-  type StepParam =
-    | { method: 'preHeat', params: PreHeatParams }
-    | { method: 'addLiquid', params: AddLiquidParams }
-    | { method: 'startHeating', params: HeatParams }
-    | { method: 'shaking', params: DryParams }
-    | { method: 'takePhoto', params: AnnealParams }
+  type StepParam
+    = | { method: 'preHeat', params: PreHeatParams }
+      | { method: 'addLiquid', params: AddLiquidParams }
+      | { method: 'startHeating', params: HeatParams }
+      | { method: 'shaking', params: DryParams }
+      | { method: 'takePhoto', params: AnnealParams }
 
   interface StepItem {
     name: string

src/types/home.d.ts

@@ -1,6 +1,8 @@
 declare namespace Home {
   interface HomeStore {
     heatAreaList: HeatArea[]
+    photos: string[]
+    previewVisible: boolean
   }
   interface HeatArea {
     label: 'A-1' | 'A-2' | 'A-3' | 'A-4' | 'A-5' | 'A-6'

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

@@ -327,14 +327,12 @@ const savePhoto = () => {
   photoVisible.value = true
 }
 
-const previewVisible = ref(false)
-const photos = ref<string[]>([])
 const previewHandle = () => {
   if (!photoUrl.value) {
     return
   }
-  photos.value = [photoUrl.value]
-  previewVisible.value = true
+  useHomeStore().photos = [photoUrl.value]
+  useHomeStore().previewVisible = true
 }
 </script>
 
@@ -498,7 +496,7 @@ const previewHandle = () => {
     <StartHeat v-if="startHeatVisible" @ok="startHeatVisible = false" @cancel="startHeatVisible = false" />
     <AddLiquid v-if="addLiquidVisible" @ok="addLiquidVisible = false" @cancel="addLiquidVisible = false" />
     <FillSolution v-if="fillSolutionVisible" @ok="fillSolutionVisible = false" @cancel="fillSolutionVisible = false" />
-    <TImageViewer v-model:images="photos" v-model:visible="previewVisible" />
+    <TImageViewer v-model:images="homeStore.photos" v-model:visible="homeStore.previewVisible" style="z-index: 9000" />
   </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)