From 712580631a48c93b931aede47198573757ecad15 Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Sun, 31 Mar 2024 18:54:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=BB=E5=8A=A1=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B2=89=E6=B5=B8=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/task/content/Content.vue | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index 7b4e457..e0c9fe3 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -77,6 +77,17 @@ const taskDetailPictureList = ref<any[]>([])
 const userStore = useUser()
 const imageRef = ref<ComponentElRef | null>()
 let processItems: any[] = []
+const isFullScreen = ref(false);
+
+const fullscreenStyles = computed<any>(() => ({
+  'width': isFullScreen.value ? '100vw' : '',
+  'height': isFullScreen.value ? '100vh' : '',
+  'position': isFullScreen.value ? 'fixed' : '',
+  'top': isFullScreen.value ? '0' : '',
+  'left': isFullScreen.value ? '0' : '',
+  'zIndex': isFullScreen.value ? '9999' : '',
+}));
+
 
 onMounted(() => {
   window.addEventListener('keydown', handleKeydown)
@@ -299,9 +310,13 @@ onUnmounted(() => {
 })
 
 function immersionHandler() {
-  taskStore.updateImmersion()
+  // taskStore.updateImmersion()
+  toggleFullScreen();
 }
-
+// 切换全屏状态
+const toggleFullScreen = () => {
+  isFullScreen.value = !isFullScreen.value;
+};
 function previewHandler(event: MouseEvent) {
   event.stopImmediatePropagation()
   event.stopPropagation()
@@ -342,7 +357,7 @@ function reloadList(param, text) {
 </script>
 
 <template>
-  <div class="wrapper">
+  <div class="wrapper fullscreen-container" :style="fullscreenStyles">
     <div class="wrapper-header">
       <div class="left">
         <span class="font">任务ID：{{ taskDetailInfo.fromtaskname }}</span>
@@ -381,7 +396,8 @@ function reloadList(param, text) {
             </ul>
           </n-popover> -->
           <div class="icon-wrap">
-            <SvgIcon size="20" name="immersion-model" @click="immersionHandler" />
+            <SvgIcon size="20" v-if="isFullScreen" name="power-off" @click="immersionHandler" style="cursor: pointer;"/>
+            <SvgIcon size="20" v-else name="immersion-model" @click="immersionHandler" style="cursor: pointer;"/>
           </div>
         </div>
         <div v-show="showActions" class="batch">
@@ -607,6 +623,12 @@ function reloadList(param, text) {
 </template>
 
 <style lang="less" scoped>
+.fullscreen-container {
+  /* 可添加其他样式 */
+  width: 100vw;
+  height: 100vh;
+  margin: 0px !important;
+}
 ::v-deep(.n-tabs-tab__label) {
   font-size: 14px;
   font-family: PingFang SC, PingFang SC-Regular;