大屏项目初始化

screen-vue/src/views/screen/Erp/index.vue

@@ -9,17 +9,17 @@
     <div class="erp-section erp-upper-section">
       <div class="erp-col erp-col-1-3">
         <div class="erp-card">
-          <ChartV01 :formParams="props.formParams" />
+          <ChartV01 :formParams="FormValues" />
         </div>
       </div>
       <div class="erp-col erp-col-1-3">
         <div class="erp-card">
-          <ChartV02 :formParams="props.formParams" />
+          <ChartV02 :formParams="FormValues" />
         </div>
       </div>
       <div class="erp-col erp-col-1-3">
         <div class="erp-card">
-          <ChartV03 :formParams="props.formParams" />
+          <ChartV03 :formParams="FormValues" />
         </div>
       </div>
     </div>
@@ -29,19 +29,19 @@
         <div class="erp-inner-layout">
           <div class="erp-col erp-col-1-2">
             <div class="erp-card">
-              <ChartV04 :formParams="props.formParams" />
+              <ChartV04 :formParams="FormValues" />
             </div>
           </div>
           <div class="erp-col erp-col-1-2">
             <div class="erp-card">
-              <ChartV05 :formParams="props.formParams" />
+              <ChartV05 :formParams="FormValues" />
             </div>
           </div>
         </div>
       </div>
       <div class="erp-col erp-col-1-2">
         <div class="erp-card">
-          <ChartV06 :formParams="props.formParams" />
+          <ChartV06 :formParams="FormValues" />
         </div>
       </div>
     </div>
@@ -51,19 +51,19 @@
         <div class="erp-inner-layout">
           <div class="erp-col erp-col-1-2">
             <div class="erp-card">
-              <ChartV07 :formParams="props.formParams" />
+              <ChartV07 :formParams="FormValues" />
             </div>
           </div>
           <div class="erp-col erp-col-1-2">
             <div class="erp-card">
-              <ChartV08 :formParams="props.formParams" />
+              <ChartV08 :formParams="FormValues" />
             </div>
           </div>
         </div>
       </div>
       <div class="erp-col erp-col-1-2">
         <div class="erp-card">
-          <ChartV09 :formParams="props.formParams" />
+          <ChartV09 :formParams="FormValues" />
         </div>
       </div>
     </div>
@@ -72,6 +72,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import ChartTop from './components/ChartTop.vue'
 import ChartV01 from './components/ChartV01.vue';
 import ChartV02 from './components/ChartV02.vue';
@@ -83,15 +84,17 @@ import ChartV07 from './components/ChartV07.vue';
 import ChartV08 from './components/ChartV08.vue';
 import ChartV09 from './components/ChartV09.vue';
 
-const props = defineProps({
-  formParams: {
-    type: Object,
-    default: () => ({})
-  }
+const route = useRoute();
+
+const FormValues = ref({
+  reqParam: route.query.year
 });
 
 watch(
-  () => props.formParams,
+  () => route.query.year,
+  (newVal) => {
+	  FormValues.value.reqParam = newVal;
+  },
   { 
     deep: true,
     immediate: true

screen-vue/src/views/screen/Home/index.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

screen-vue/src/views/screen/Work/index.vue

@@ -9,34 +9,34 @@
     <div class="work-section work-main-section">
       <div class="work-col work-col-1-3 work-left-col">
         <div class="work-card work-card-1-3">
-			<ChartV01 :formParams="props.formParams" />
+			<ChartV01 :formParams="FormValues" />
 		</div>
         <div class="work-card work-card-1-3">
-			<ChartV02 :formParams="props.formParams" />
+			<ChartV02 :formParams="FormValues" />
 		</div>
         <div class="work-card work-card-1-3">
-			<ChartV03 :formParams="props.formParams" />
+			<ChartV03 :formParams="FormValues" />
 		</div>
       </div>
 
       <div class="work-col work-col-1-3 work-middle-col">
         <div class="work-card work-card-2-3">
-			<ChartV04 :formParams="props.formParams" />
+			<ChartV04 :formParams="FormValues" />
 		</div>
         <div class="work-card work-card-1-3">
-			<ChartV05 :formParams="props.formParams" />
+			<ChartV05 :formParams="FormValues" />
 		</div>
       </div>
 
       <div class="work-col work-col-1-3 work-right-col">
         <div class="work-card work-card-1-3">
-			<ChartV06 :formParams="props.formParams" />
+			<ChartV06 :formParams="FormValues" />
 		</div>
         <div class="work-card work-card-1-3">
-			<ChartV07 :formParams="props.formParams" />
+			<ChartV07 :formParams="FormValues" />
 		</div>
         <div class="work-card work-card-1-3">
-			<ChartV08 :formParams="props.formParams" />
+			<ChartV08 :formParams="FormValues" />
 		</div>
       </div>
     </div>
@@ -45,6 +45,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import ChartTop from './components/ChartTop.vue'
 import ChartV01 from './components/ChartV01.vue';
 import ChartV02 from './components/ChartV02.vue';
@@ -55,16 +56,17 @@ import ChartV06 from './components/ChartV06.vue';
 import ChartV07 from './components/ChartV07.vue';
 import ChartV08 from './components/ChartV08.vue';
 
-const props = defineProps({
-  formParams: {
-    type: Object,
-    default: () => ({})
-  }
+const route = useRoute();
+
+const FormValues = ref({
+  reqParam: route.query.year
 });
 
 watch(
-  () => props.formParams,
-  (newVal) => {},
+  () => route.query.year,
+  (newVal) => {
+	  FormValues.value.reqParam = newVal;
+  },
   { 
     deep: true,
     immediate: true

screen-vue/src/views/screen/index.vue

@@ -8,12 +8,19 @@
         <div class="tabs-left">
           <div
             class="tab-item"
-            v-for="tab in allTabs"
-            :key="tab.moduleCode"
-            :class="{ active: activeTab === tab.moduleCode }"
-            @click="switchTab(tab.moduleCode)"
+            :class="{ active: isHome }"
+            @click="goHome"
           >
-            <span>{{ tab.moduleName }}</span>
+            <span>首页</span>
+          </div>
+          <div
+            class="tab-item"
+            v-for="item in allTabs"
+            :key="item.moduleCode"
+            :class="{ active: isCurrentTab(item.path) }"
+            @click="switchTabByRoute(item)"
+          >
+            <span>{{ item.moduleName }}</span>
           </div>
         </div>
         <div class="query-group">
@@ -27,60 +34,105 @@
         </div>
       </div>
     </header>
-
     <main class="screen-content">
-      <div v-if="activeTab === 'work'" class="screen-page">
-        <WorkIndex :formParams="FormValues" />
-      </div>
-      <div v-else-if="activeTab === 'werp'" class="screen-page">
-        <ErpIndex :formParams="FormValues" />
+      <div v-if="isHome" class="screen-page">
+        <HomePage />
       </div>
+      <router-view v-else v-slot="{ Component }">
+        <div class="screen-page" v-if="Component">
+          <component :is="Component" />
+        </div>
+      </router-view>
     </main>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
-import ErpIndex from './Erp/index.vue';
-import WorkIndex from './Work/index.vue';
+import { ref, onMounted, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
 import { getHomeModuleList } from '@/api/bizApi'
+import HomePage from './Home/index.vue'
 
-const screenTitle = ref('个人数字化分析看板');
+const router = useRouter();
+const route = useRoute();
+
+const HOME_TITLE = "个人数字化分析看板";
+const screenTitle = ref(HOME_TITLE);
 const currentYear = new Date().getFullYear().toString();
 
-const FormValues = ref({
-  reqParam: currentYear
+const allTabs = ref([])
+const queryDate = ref(currentYear);
+
+const getTitle = (title) => {
+  screenTitle.value = title;
+};
+
+const isHome = computed(() => {
+  return route.path === '/bigScreen' || route.path === '/';
 });
 
-const allTabs = ref([])
-const activeTab = ref('work')
-const queryDate = ref();
+const goHome = () => {
+	screenTitle.value = HOME_TITLE;
+	router.push('/bigScreen').catch(() => {});
+};
 
-const switchTab = (key) => {
-  activeTab.value = key
-}
+const isCurrentTab = (routePath) => {
+  return route.path === routePath;
+};
+
+const switchTabByRoute = (item) => {
+  getTitle(item.titleName);
+  if (!item.path) {
+    ElMessage.warning('该模块暂无对应路由');
+    return;
+  }
+  router.push({
+    path: item.path,
+    query: {
+      year: queryDate.value,
+      ...route.query
+    }
+  }).catch(err => {
+    ElMessage.error('页面切换失败，请重试');
+  });
+};
 
 const handleQuery = () => {
-	FormValues.value.reqParam = queryDate.value;
-}
+  if (!queryDate.value) {
+    ElMessage.warning('请选择查询年份');
+    return;
+  }
+  router.push({
+    path: route.path,
+    query: {
+      ...route.query,
+      year: queryDate.value
+    }
+  });
+};
 
 async function getList() {
   try {
-    const res = await getHomeModuleList()
-	allTabs.value = res || []
+    const res = await getHomeModuleList();
+    allTabs.value = res || [];
   } catch (error) {
-    console.error(error)
-    allTabs.value = []
+    console.error('获取模块列表失败：', error);
+    allTabs.value = [];
   }
 }
 
-const initApp = () =>{
-	queryDate.value = currentYear;
-	getList();
-}
+const initApp = () => {
+  getList();
+};
 
 onMounted(() => {
   initApp();
+  router.afterEach((to) => {
+    if (to.query.year) {
+      queryDate.value = to.query.year;
+    }
+  });
 });
 </script>
 
@@ -325,6 +377,14 @@ onMounted(() => {
   overflow: hidden;
 }
 
+.empty-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #e0e6ff;
+  font-size: 18px;
+}
+
 @media (max-width: 1600px) {
   .main-title {
     font-size: 24px;