可视化大屏开发完成

src/router/routes.js

@@ -211,12 +211,12 @@ const routes = [
             title: "投资目标责任书",
             component: () => import("@/views/everydayPage/shareAdd.vue"),
           },
-          {
-            path: "/bigScreen",
-            name: "bigScreen",
-            title: "可视化大屏",
-            component: () => import("@/views/everydayPage/bigScreen.vue"),
-          },
+          // {
+          //   path: "/bigScreen",
+          //   name: "bigScreen",
+          //   title: "可视化大屏",
+          //   component: () => import("@/views/everydayPage/bigScreen.vue"),
+          // },
         ],
       },
       {

src/views/everydayPage/bigScreen.vue

@@ -50,6 +50,12 @@
           </el-icon>
           {{ isFullscreen ? "退出全屏" : "全屏" }}
         </span>
+        <span @click="handleInput(!modelValue)" class="fullscreen-text">
+          <el-icon :size="18">
+            <Switch />
+          </el-icon>
+          {{ modelValue ? "决策分析可视化大屏" : "交通投资可视化大屏" }}
+        </span>
       </div>
     </div>
     <div class="map-container">
@@ -424,10 +430,26 @@ import { reactive, ref, nextTick, watch, onMounted, onUnmounted } from "vue";
 import * as echarts from "echarts";
 
 const selectedContentBtn = ref("jianshe");
-const isFullscreen = ref(false);
 const showBackBtn = ref(false);
 const selectedNavBtn = ref("equity"); // 默认选中股权投资
 
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: "", // 默认值，避免空值报错
+  },
+  isFullscreen: {
+    // 父组件传递的全屏状态
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:modelValue", "toggle-fullscreen"]);
+const handleInput = (e) => {
+  // e.target.value 是输入框的最新值
+  emit("update:modelValue", e);
+};
+
 // 导航按钮点击事件
 const handleNavBtnClick = (key) => {
   selectedNavBtn.value = key;
@@ -1474,67 +1496,37 @@ const resizeEcharts = () => {
 
 // 全屏切换功能
 const toggleFullscreen = () => {
-  const homeContainer = document.querySelector(".home-container");
-
-  if (isFullscreen.value) {
-    // 退出全屏
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    } else if (document.webkitExitFullscreen) {
-      document.webkitExitFullscreen();
-    } else if (document.msExitFullscreen) {
-      document.msExitFullscreen();
-    }
-
-    homeContainer.style.height = "100%";
-    // 移除全屏类
-    homeContainer.classList.remove("fullscreen");
-  } else {
-    // 进入全屏
-    if (homeContainer.requestFullscreen) {
-      homeContainer.requestFullscreen();
-    } else if (homeContainer.webkitRequestFullscreen) {
-      homeContainer.webkitRequestFullscreen();
-    } else if (homeContainer.msRequestFullscreen) {
-      homeContainer.msRequestFullscreen();
-    }
-
-    homeContainer.style.height = "100vh";
-    // 添加全屏类
-    homeContainer.classList.add("fullscreen");
-  }
-
-  isFullscreen.value = !isFullscreen.value;
+  emit("toggle-fullscreen"); // 触发父组件的全屏切换方法
 };
 
 onMounted(() => {
   initProgressPie();
-  window.addEventListener("resize", resizeEcharts);
+  window.addEventListener("echarts-resize", resizeEcharts); // 监听父组件的resize事件
 });
 onUnmounted(() => {
-  window.removeEventListener("resize", resizeEcharts);
+  window.removeEventListener("echarts-resize", resizeEcharts);
 });
 
-// 监听全屏变化事件
-window.addEventListener("fullscreenchange", () => {
-  const homeContainer = document.querySelector(".home-container");
+// // 监听全屏变化事件
+// window.addEventListener("fullscreenchange", () => {
+//   const homeContainer = document.querySelector(".home-container");
 
-  if (!document.fullscreenElement) {
-    isFullscreen.value = false;
-    if (homeContainer) {
-      homeContainer.style.height = "100%";
-      // 移除全屏类
-      homeContainer.classList.remove("fullscreen");
-    }
-  } else {
-    isFullscreen.value = true;
-    if (homeContainer) {
-      homeContainer.style.height = "100vh";
-      // 添加全屏类
-      homeContainer.classList.add("fullscreen");
-    }
-  }
-});
+//   if (!document.fullscreenElement) {
+//     isFullscreen.value = false;
+//     if (homeContainer) {
+//       homeContainer.style.height = "100%";
+//       // 移除全屏类
+//       homeContainer.classList.remove("fullscreen");
+//     }
+//   } else {
+//     isFullscreen.value = true;
+//     if (homeContainer) {
+//       homeContainer.style.height = "100vh";
+//       // 添加全屏类
+//       homeContainer.classList.add("fullscreen");
+//     }
+//   }
+// });
 
 // 表格弹框
 let tableData = ref([]);
@@ -1666,6 +1658,7 @@ const handleClose = () => {
     }
 
     .header-fullscreen {
+      display: flex;
       position: absolute;
       right: 4%;
       top: 110%;
@@ -1674,6 +1667,7 @@ const handleClose = () => {
       z-index: 9999;
 
       .fullscreen-text {
+        margin-right: 16px;
         color: white;
         font-weight: 700;
         font-size: 14px;
@@ -1975,9 +1969,6 @@ const handleClose = () => {
     }
   }
 }
-</style>
-
-<style lang="less">
 .home-container {
   .el-dialog {
     height: 75%;