diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..4442a3a
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,116 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+- Install dependencies: `npm install`
+- Start the Vite dev server: `npm run dev`
+- Build production assets: `npm run build` or `npm run build:prod`
+- Preview the production build locally: `npm run serve`
+- Lint Vue/TS sources with autofix: `npm run lint`
+- Type-check the project manually: `npx vue-tsc --noEmit`
+
+## Tests
+
+- There is currently no project test script in `package.json` and no repository test suite outside dependency `node_modules`.
+- Because no test runner is configured, there is no supported “run a single test” command yet.
+
+## Stack and runtime model
+
+- Vite 5 + Vue 3 + TypeScript SPA.
+- UI is built with Element Plus and Element Plus icons.
+- Routing uses `vue-router` with hash history.
+- Global state uses Pinia.
+- HTTP is centralized through Axios wrappers in `src/utils/http.ts` and `src/service/baseService.ts`.
+- API base URL comes from `VITE_APP_API`, but can be overridden at runtime by `window.SITE_CONFIG.apiURL` (`src/constants/app.ts`).
+
+## Application bootstrapping
+
+- `src/main.ts` is the entry point. It mounts the app, installs Pinia/router/Element Plus, and globally registers the reusable `sys-*` selector/tree/radio components.
+- `src/constants/app.ts` contains runtime app flags such as API URL, request timeout, keep-alive enablement, and fullscreen pages.
+
+## Routing and menu architecture
+
+This app does **not** rely only on static frontend routes.
+
+- `src/router/base.ts` defines the small set of base routes that always exist: `/`, `/home`, `/login`, password update, iframe, and error pages.
+- `src/router/index.ts` performs most of the real routing work in `beforeEach`:
+  - checks auth token
+  - initializes app data on first authenticated navigation
+  - dynamically registers backend-provided routes
+  - pushes visited routes into the tab system via the event bus
+- `useAppStore().initApp()` (`src/store/index.ts`) fetches menus, permissions, user info, and dictionaries from the backend before the app is considered ready.
+- `src/utils/router.ts` converts backend menu records into router records:
+  - maps backend `url` values to Vue files under `src/views`
+  - handles internal pages vs iframe pages vs “open in new page” links
+  - flattens nested routes during registration because keep-alive does not support the original multi-level structure well
+- `getSysRouteMap()` in `src/router/index.ts` uses `import.meta.glob('/src/views/**/*.vue')`, so backend menu URLs are expected to correspond to files in `src/views` after `toSysViewComponentPath()` normalization.
+
+When adding a new backend-driven page, the frontend usually needs a matching file in `src/views/...` whose path matches the menu URL convention.
+
+## State management
+
+There are two important Pinia stores:
+
+- `src/store/index.ts` (`useAppStore`): global application state
+  - login/readiness flags
+  - permissions
+  - current user
+  - dictionaries
+  - dynamically built routes and route metadata
+  - tab state
+- `src/store/importTasks.ts`: transient UI state for long-running weather data import tasks shown in the header.
+
+## Layout, tabs, and UI coordination
+
+The layout framework is event-driven.
+
+- `src/layout/index.vue` is the main authenticated shell with header, sidebar/mobile sidebar, and content area.
+- `src/layout/header/base-header.vue` wires header actions, including the import-task indicator.
+- `src/layout/view/base-view.vue` wraps routed pages in `keep-alive` and supports forced tab refresh by changing component keys.
+- `src/layout/sidebar/base-sidebar.vue` renders navigation from the dynamically built route tree and adapts across left/top/mixed layouts.
+- `src/utils/emits.ts` exports a global `mitt` event bus.
+- `src/constants/enum.ts` defines the event names (`EMitt`) and theme/layout enums used across header/sidebar/view coordination.
+
+If you change navigation, tab refresh, sidebar behavior, or theme/layout switching, trace both the Pinia store and the `mitt` events.
+
+## HTTP and authentication flow
+
+- `src/utils/http.ts` owns the Axios instance and interceptors.
+- Every request gets the `token` header when present.
+- GET requests get an automatic `_t` timestamp query param to avoid caching.
+- Business success is defined as `response.data.code === 0`; other codes surface Element Plus error messages.
+- HTTP 401 and business-code 401 both redirect to `/login`.
+- `src/service/baseService.ts` is the thin CRUD wrapper used throughout views and shared components.
+
+## Common page pattern
+
+Many admin-style pages follow the same hook-based CRUD structure.
+
+- `src/hooks/useView.ts` provides the shared list-page workflow: query, paging, sorting, delete, export, permission checks, dictionary label lookup, and route helpers.
+- Views under `src/views/sys`, `src/views/job`, `src/views/oss`, etc. commonly build their page state around this hook rather than reimplementing list behavior.
+
+Before refactoring one of these screens, check whether the behavior is coming from `useView` rather than the page file itself.
+
+## Weather-specific feature areas
+
+The repository has been extended beyond the generic admin shell with weather-focused functionality:
+
+- `src/views/home.vue` is a large custom analytics dashboard for “historical same-day weather” presentation rather than a simple CRUD page.
+- `src/utils/chartBuilder.ts` and `src/utils/exportReport.ts` support chart/report/export behavior used by weather-facing screens.
+- `src/views/station/*` manages weather station data.
+- `src/views/dailyweather/*` manages daily weather records, including import flows.
+- `src/views/dailyweather/weatherdailydata-import.vue` uploads Excel files and polls backend task progress.
+- `src/layout/header/import-task-indicator.vue` + `src/store/importTasks.ts` expose those long-running import tasks in the global header.
+
+## Component conventions worth knowing
+
+- The reusable selector/tree controls are registered globally in `src/main.ts` and imported from `src/components/sys-*`.
+- Some files still use legacy `Ren*` local variable names while importing `sys-*` components; this is naming drift, not a separate component family.
+- SVG icons are loaded through `vite-plugin-svg-icons` from `src/assets/icons/svg` and registered by `virtual:svg-icons-register`.
+
+## Repository notes
+
+- There is no existing `.cursorrules`, `.cursor/rules/`, or `.github/copilot-instructions.md` content to carry forward.
+- `README.md` currently does not contain substantive project guidance, so the main operational context lives in code and this file.
diff --git a/README.md b/README.md
index 5bbfac6..e69de29 100644
--- a/README.md
+++ b/README.md
@@ -1,50 +0,0 @@
-## renren-ui
-- renren-ui是基于Vue3、TypeScript、Element Plus、Vue Router、Pinia、Axios、Vite等开发，实现 【[renren-security](https://gitee.com/renrenio/renren-security)】 后台管理前端功能，提供一套更优的前端解决方案
-- 前后端分离，通过token进行数据交互，可独立部署
-- 动态菜单，通过菜单管理统一管理访问路由
-- 后端地址：https://gitee.com/renrenio/renren-security
-- 演示地址：http://demo.open.renren.io/renren-security (账号密码：admin/admin)
-
-<br> 
-
-![输入图片说明](public/1.png)
-
-## 安装
-
-您需要提前在本地安装[Node.js](https://nodejs.org/en/)，版本号为：[18、20]，再使用[Git](https://git-scm.com/)克隆项目或者直接下载项目后，然后通过`终端命令行`执行以下命令。
-
-```bash
-# 切换到项目根目录
-
-# 安装插件
-npm install
-
-# 启动项目
-npm run dev
-```
-
-> 如网络不稳定，安装时出错或进度过慢！请移步 [cnpm](https://npmmirror.com/) 淘宝镜像进行安装。
-
-启动完成后，会自动打开浏览器访问 [http://localhost:8001](http://localhost:8001)，如您看到下面的页面代表`前端项目`运行成功！因为前后端分离项目，需保证`前端项目`和`后台项目`分别独立正常运行。
-
-请留意下面的页面，其中`验证码`未能正常显示，控制台有`API请求`报错信息！这时需检查`后台项目`是否正常运行。
-
-
-
-## 如何交流、反馈、参与贡献？
-- 开发文档：https://www.renren.io/guide/security
-- 官方社区：https://www.renren.io/community
-- [人人开源](https://www.renren.io)：https://www.renren.io
-- 如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持
-- 技术讨论、二次开发等咨询、问题和建议，请移步到官方社区，我会在第一时间进行解答和回复！
-- 微信扫码并关注【人人开源】，获得项目最新动态及更新提醒<br>
-
-  <br>
-
-## 微信交流群
-我们提供了微信交流群，扫码下面的二维码，关注【人人开源】公众号，回复【加群】，即可根据提示加入微信群！
-<br><br>
-![输入图片说明](public/wechat.jpg)
-
-<br>
-<br>
diff --git a/src/components/ren-dept-tree/index.ts b/src/components/ren-dept-tree/index.ts
deleted file mode 100644
index 91593ef..0000000
--- a/src/components/ren-dept-tree/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { withInstall } from "@/utils/utils";
-import RenDeptTree from "./src/ren-dept-tree.vue";
-
-RenDeptTree.name = "RenDeptTree";
-export default withInstall(RenDeptTree);
diff --git a/src/components/ren-radio-group/index.ts b/src/components/ren-radio-group/index.ts
deleted file mode 100644
index d9bcc95..0000000
--- a/src/components/ren-radio-group/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { withInstall } from "@/utils/utils";
-import RenRadioGroup from "./src/ren-radio-group.vue";
-
-export default withInstall(RenRadioGroup);
diff --git a/src/components/ren-region-tree/index.ts b/src/components/ren-region-tree/index.ts
deleted file mode 100644
index 4255fbb..0000000
--- a/src/components/ren-region-tree/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { withInstall } from "@/utils/utils";
-import RenRegionTree from "./src/ren-region-tree.vue";
-
-RenRegionTree.name = "RenRegionTree";
-export default withInstall(RenRegionTree);
diff --git a/src/components/ren-select/index.ts b/src/components/ren-select/index.ts
deleted file mode 100644
index 47267ab..0000000
--- a/src/components/ren-select/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { withInstall } from "@/utils/utils";
-import RenSelect from "./src/ren-select.vue";
-
-export default withInstall(RenSelect);
diff --git a/src/components/sys-dept-tree/index.ts b/src/components/sys-dept-tree/index.ts
new file mode 100644
index 0000000..b4c6e8b
--- /dev/null
+++ b/src/components/sys-dept-tree/index.ts
@@ -0,0 +1,5 @@
+import { withInstall } from "@/utils/utils";
+import SysDeptTree from "./src/sys-dept-tree.vue";
+
+SysDeptTree.name = "SysDeptTree";
+export default withInstall(SysDeptTree);
diff --git a/src/components/ren-dept-tree/src/ren-dept-tree.vue b/src/components/sys-dept-tree/src/sys-dept-tree.vue
similarity index 100%
rename from src/components/ren-dept-tree/src/ren-dept-tree.vue
rename to src/components/sys-dept-tree/src/sys-dept-tree.vue
diff --git a/src/components/sys-radio-group/index.ts b/src/components/sys-radio-group/index.ts
new file mode 100644
index 0000000..95e7345
--- /dev/null
+++ b/src/components/sys-radio-group/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from "@/utils/utils";
+import SysRadioGroup from "./src/sys-radio-group.vue";
+
+export default withInstall(SysRadioGroup);
diff --git a/src/components/ren-radio-group/src/ren-radio-group.vue b/src/components/sys-radio-group/src/sys-radio-group.vue
similarity index 96%
rename from src/components/ren-radio-group/src/ren-radio-group.vue
rename to src/components/sys-radio-group/src/sys-radio-group.vue
index 4de2d8c..ca8709e 100644
--- a/src/components/ren-radio-group/src/ren-radio-group.vue
+++ b/src/components/sys-radio-group/src/sys-radio-group.vue
@@ -8,7 +8,7 @@ import { getDictDataList } from "@/utils/utils";
 import { computed, defineComponent } from "vue";
 import { useAppStore } from "@/store";
 export default defineComponent({
-  name: "RenRadioGroup",
+  name: "SysRadioGroup",
   props: {
     modelValue: [Number, String],
     dictType: String
diff --git a/src/components/sys-region-tree/index.ts b/src/components/sys-region-tree/index.ts
new file mode 100644
index 0000000..9408ef4
--- /dev/null
+++ b/src/components/sys-region-tree/index.ts
@@ -0,0 +1,5 @@
+import { withInstall } from "@/utils/utils";
+import SysRegionTree from "./src/sys-region-tree.vue";
+
+SysRegionTree.name = "SysRegionTree";
+export default withInstall(SysRegionTree);
diff --git a/src/components/ren-region-tree/src/ren-region-tree.vue b/src/components/sys-region-tree/src/sys-region-tree.vue
similarity index 98%
rename from src/components/ren-region-tree/src/ren-region-tree.vue
rename to src/components/sys-region-tree/src/sys-region-tree.vue
index 9eebee5..e6cd5da 100644
--- a/src/components/ren-region-tree/src/ren-region-tree.vue
+++ b/src/components/sys-region-tree/src/sys-region-tree.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ren-region">
+  <div class="sys-region">
     <el-input v-model="showName" :placeholder="placeholder" @click="treeDialog">
       <template v-slot:append>
         <el-button icon="search" @click="treeDialog"></el-button>
@@ -116,7 +116,7 @@ const commitHandle = () => {
 </script>
 
 <style lang="less" scoped>
-.ren-region {
+.sys-region {
   .filter-tree {
     max-height: 230px;
     overflow: auto;
diff --git a/src/components/sys-select/index.ts b/src/components/sys-select/index.ts
new file mode 100644
index 0000000..1ae1a32
--- /dev/null
+++ b/src/components/sys-select/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from "@/utils/utils";
+import SysSelect from "./src/sys-select.vue";
+
+export default withInstall(SysSelect);
diff --git a/src/components/ren-select/src/ren-select.vue b/src/components/sys-select/src/sys-select.vue
similarity index 97%
rename from src/components/ren-select/src/ren-select.vue
rename to src/components/sys-select/src/sys-select.vue
index de3ab9c..8aeb65b 100644
--- a/src/components/ren-select/src/ren-select.vue
+++ b/src/components/sys-select/src/sys-select.vue
@@ -8,7 +8,7 @@ import { computed, defineComponent } from "vue";
 import { getDictDataList } from "@/utils/utils";
 import { useAppStore } from "@/store";
 export default defineComponent({
-  name: "RenSelect",
+  name: "SysSelect",
   props: {
     modelValue: [Number, String],
     dictType: String,
diff --git a/src/layout/header/base-header.vue b/src/layout/header/base-header.vue
index 621adad..d5be4cd 100644
--- a/src/layout/header/base-header.vue
+++ b/src/layout/header/base-header.vue
@@ -10,6 +10,7 @@ import Breadcrumb from "./breadcrumb.vue";
 import CollapseSidebarBtn from "./collapse-sidebar-btn.vue";
 import Expand from "./expand.vue";
 import HeaderMixNavMenus from "./header-mix-nav-menus.vue";
+import ImportTaskIndicator from "./import-task-indicator.vue";
 import Logo from "./logo.vue";
 import "@/assets/css/header.less";
 
@@ -18,7 +19,7 @@ import "@/assets/css/header.less";
  */
 export default defineComponent({
   name: "Header",
-  components: { BaseSidebar, Breadcrumb, CollapseSidebarBtn, Expand, HeaderMixNavMenus, Logo },
+  components: { BaseSidebar, Breadcrumb, CollapseSidebarBtn, Expand, HeaderMixNavMenus, ImportTaskIndicator, Logo },
   setup() {
     const store = useAppStore();
     const state = reactive({
@@ -55,7 +56,8 @@ export default defineComponent({
           <breadcrumb v-else></breadcrumb>
         </div>
       </div>
-      <div style="flex-shrink: 0">
+      <div style="display: flex; align-items: center; flex-shrink: 0">
+        <import-task-indicator></import-task-indicator>
         <expand :userName="store.state.user.username"></expand>
       </div>
     </div>
diff --git a/src/layout/header/import-task-indicator.vue b/src/layout/header/import-task-indicator.vue
new file mode 100644
index 0000000..7e370ae
--- /dev/null
+++ b/src/layout/header/import-task-indicator.vue
@@ -0,0 +1,143 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useImportTaskStore } from "@/store/importTasks";
+
+export default defineComponent({
+  name: "ImportTaskIndicator",
+  setup() {
+    const taskStore = useImportTaskStore();
+
+    const statusIcon = (status: string) => {
+      if (status === "pending" || status === "uploading" || status === "processing") return "loading";
+      if (status === "success") return "circle-check";
+      return "circle-close";
+    };
+
+    const statusClass = (status: string) => {
+      if (status === "success") return "task-success";
+      if (status === "error") return "task-error";
+      return "task-running";
+    };
+
+    const progressLabel = (task: any) => {
+      if (task.totalRows > 0) {
+        const pct = Math.round((task.processedRows / task.totalRows) * 100);
+        return ` ${pct}%`;
+      }
+      return "";
+    };
+
+    const formatTime = (ts: number) => {
+      const d = new Date(ts);
+      return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}:${d.getSeconds().toString().padStart(2, "0")}`;
+    };
+
+    return { taskStore, statusIcon, statusClass, formatTime, progressLabel };
+  }
+});
+</script>
+<template>
+  <div v-if="taskStore.hasActiveTasks" class="rr-header-right-items rr-header-action">
+    <el-popover placement="bottom" :width="360" trigger="click" popper-class="import-task-popover">
+      <template #reference>
+        <div class="import-task-trigger">
+          <el-badge :value="taskStore.activeTasks.length" :max="99" class="task-badge">
+            <el-icon class="is-loading"><refresh-right /></el-icon>
+          </el-badge>
+        </div>
+      </template>
+      <div class="import-task-panel">
+        <div class="panel-header">
+          <span>导入任务</span>
+          <el-button size="small" text @click="taskStore.clearCompleted()">清除已完成</el-button>
+        </div>
+        <div class="panel-body">
+          <div v-for="task in taskStore.recentTasks" :key="task.id" class="task-item">
+            <el-icon :class="[statusClass(task.status), { 'is-loading': task.status === 'uploading' || task.status === 'processing' }]">
+              <component :is="statusIcon(task.status)" />
+            </el-icon>
+            <div class="task-info">
+              <span class="task-name">{{ task.fileName }}</span>
+              <span class="task-message">{{ task.message }}</span>
+            </div>
+            <span v-if="task.status === 'processing' && task.totalRows > 0" class="task-progress">{{ Math.round((task.processedRows / task.totalRows) * 100) }}%</span>
+            <span class="task-time">{{ formatTime(task.createdAt) }}</span>
+            <el-button v-if="task.status === 'success' || task.status === 'error'" size="small" text @click="taskStore.removeTask(task.id)">
+              <el-icon><close /></el-icon>
+            </el-button>
+          </div>
+          <div v-if="taskStore.recentTasks.length === 0" class="panel-empty">暂无任务</div>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+<style scoped>
+.import-task-trigger {
+  padding: 0 12px;
+  height: 50px;
+  line-height: 56px;
+  cursor: pointer;
+}
+.task-badge {
+  line-height: normal;
+}
+.import-task-panel .panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+  font-weight: 600;
+  font-size: 14px;
+}
+.import-task-panel .panel-body {
+  max-height: 300px;
+  overflow-y: auto;
+  margin-top: 8px;
+}
+.import-task-panel .task-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 4px;
+  border-bottom: 1px solid #f2f2f2;
+}
+.import-task-panel .task-item:last-child {
+  border-bottom: none;
+}
+.import-task-panel .task-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.import-task-panel .task-name {
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.import-task-panel .task-message {
+  font-size: 12px;
+  color: #909399;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.import-task-panel .task-time {
+  font-size: 12px;
+  color: #c0c4cc;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.task-success { color: #67c23a; }
+.task-error { color: #f56c6c; }
+.task-running { color: #409eff; }
+.panel-empty {
+  text-align: center;
+  color: #c0c4cc;
+  padding: 24px 0;
+  font-size: 13px;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 9bed344..77fe29f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,8 @@
 import "@/assets/icons/iconfont/iconfont.js";
-import RenDeptTree from "@/components/ren-dept-tree";
-import RenRadioGroup from "@/components/ren-radio-group";
-import RenRegionTree from "@/components/ren-region-tree";
-import RenSelect from "@/components/ren-select";
+import RenDeptTree from "@/components/sys-dept-tree";
+import RenRadioGroup from "@/components/sys-radio-group";
+import RenRegionTree from "@/components/sys-region-tree";
+import RenSelect from "@/components/sys-select";
 import ElementPlus from "element-plus";
 import "element-plus/theme-chalk/display.css";
 import "element-plus/theme-chalk/index.css";
diff --git a/src/store/importTasks.ts b/src/store/importTasks.ts
new file mode 100644
index 0000000..0f40668
--- /dev/null
+++ b/src/store/importTasks.ts
@@ -0,0 +1,47 @@
+import { defineStore } from "pinia";
+
+export interface ImportTask {
+  id: string;
+  fileName: string;
+  status: "pending" | "uploading" | "processing" | "success" | "error";
+  message: string;
+  totalRows: number;
+  processedRows: number;
+  createdAt: number;
+  completedAt: number | null;
+  backendTaskId: string;
+}
+
+export const useImportTaskStore = defineStore("useImportTaskStore", {
+  state: () => ({
+    tasks: [] as ImportTask[]
+  }),
+  getters: {
+    activeTasks(state): ImportTask[] {
+      return state.tasks.filter((t) => t.status === "pending" || t.status === "uploading" || t.status === "processing");
+    },
+    hasActiveTasks(state): boolean {
+      return state.tasks.some((t) => t.status === "pending" || t.status === "uploading" || t.status === "processing");
+    },
+    recentTasks(state): ImportTask[] {
+      return [...state.tasks].sort((a, b) => b.createdAt - a.createdAt);
+    }
+  },
+  actions: {
+    addTask(task: ImportTask) {
+      this.tasks.push(task);
+    },
+    updateTask(id: string, data: Partial<ImportTask>) {
+      const idx = this.tasks.findIndex((t) => t.id === id);
+      if (idx !== -1) {
+        this.tasks[idx] = { ...this.tasks[idx], ...data };
+      }
+    },
+    removeTask(id: string) {
+      this.tasks = this.tasks.filter((t) => t.id !== id);
+    },
+    clearCompleted() {
+      this.tasks = this.tasks.filter((t) => t.status === "pending" || t.status === "uploading" || t.status === "processing");
+    }
+  }
+});
diff --git a/src/utils/chartBuilder.ts b/src/utils/chartBuilder.ts
new file mode 100644
index 0000000..acfff97
--- /dev/null
+++ b/src/utils/chartBuilder.ts
@@ -0,0 +1,36 @@
+// utils/chartBuilder.ts
+import type { WeatherRecord } from "../service/weatherDataService";
+import type { WeatherExtremes } from "../service/weatherStatsService";
+
+export function buildWeatherOption(rows: WeatherRecord[], stats: WeatherExtremes) {
+  return {
+    tooltip: { trigger: "axis" },
+    xAxis: {
+      type: "category",
+      data: rows.map((r) => r.year)
+    },
+    yAxis: {
+      type: "value"
+    },
+    series: [
+      {
+        name: "最高温",
+        type: "bar",
+        data: rows.map((r) => {
+          const isMax = r.year === stats.maxTmaxYear;
+          return {
+            value: r.tmax,
+            itemStyle: {
+              color: isMax ? "#ff4d4f" : "#5b8ff9"
+            },
+            label: {
+              show: isMax,
+              position: "top",
+              fontWeight: 600
+            }
+          };
+        })
+      }
+    ]
+  };
+}
diff --git a/src/utils/exportReport.ts b/src/utils/exportReport.ts
new file mode 100644
index 0000000..1886916
--- /dev/null
+++ b/src/utils/exportReport.ts
@@ -0,0 +1,33 @@
+// utils/exportReport.ts
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+
+export async function exportPNG(el: HTMLElement) {
+  const canvas = await html2canvas(el, {
+    scale: 2,
+    useCORS: true,
+    backgroundColor: "#fff"
+  });
+
+  const link = document.createElement("a");
+  link.download = "weather-report.png";
+  link.href = canvas.toDataURL("image/png");
+  link.click();
+}
+
+export async function exportPDF(el: HTMLElement) {
+  const canvas = await html2canvas(el, {
+    scale: 2,
+    useCORS: true,
+    backgroundColor: "#fff"
+  });
+
+  const img = canvas.toDataURL("image/png");
+  const pdf = new jsPDF("p", "mm", "a4");
+
+  const pageWidth = 210;
+  const imgHeight = (canvas.height * pageWidth) / canvas.width;
+
+  pdf.addImage(img, "PNG", 0, 0, pageWidth, imgHeight);
+  pdf.save("weather-report.pdf");
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e673f12..62d256d 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -132,6 +132,36 @@ export const isURL = (s: string): boolean => {
   return /^http[s]?:\/\/.*/.test(s);
 };
 
+/**
+ * 复制图片
+ * @param url
+ * @param headers
+ */
+export const copyImageFromUrl = async (
+  url: string,
+  headers?: Record<string, string>
+): Promise<void> => {
+  if (!navigator.clipboard?.write || typeof ClipboardItem === "undefined") {
+    return Promise.reject(new Error("当前浏览器不支持复制图片"));
+  }
+  const response = await fetch(url, {
+    method: "GET",
+    headers
+  });
+  if (!response.ok) {
+    throw new Error("图片获取失败");
+  }
+  const blob = await response.blob();
+  if (!blob.type.startsWith("image/")) {
+    throw new Error("当前文件不是图片，无法复制");
+  }
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      [blob.type]: blob
+    })
+  ]);
+};
+
 /**
  * 正整数
  * @param {*} s
diff --git a/src/views/dailyweather/weatherdailydata-add-or-update.vue b/src/views/dailyweather/weatherdailydata-add-or-update.vue
index 854e02f..ee836e7 100644
--- a/src/views/dailyweather/weatherdailydata-add-or-update.vue
+++ b/src/views/dailyweather/weatherdailydata-add-or-update.vue
@@ -1,10 +1,23 @@
 <template>
-  <el-dialog v-model="visible" :title="!dataForm.id ? '新增观测数据' : '修改观测数据'" width="800px" :close-on-click-modal="false">
+  <el-dialog v-model="visible" :title="!dataForm.id ? '新增数据' : '修改数据'" width="900px" :close-on-click-modal="false">
     <el-form :model="dataForm" :rules="rules" ref="dataFormRef" label-width="140px" style="padding-right: 20px">
-      <el-row :gutter="20">
+      <el-row :gutter="24">
+        <el-divider content-position="left">基本信息</el-divider>
         <el-col :span="12">
           <el-form-item label="站点ID" prop="stationId">
-            <el-input v-model="dataForm.stationId" placeholder="请输入区站号"></el-input>
+            <el-select v-if="!manualInput" v-model="dataForm.stationId" filterable placeholder="从列表选择或输入" style="width: 100%" clearable>
+              <el-option v-for="s in stationOptions" :key="s.stationCode" :label="`${s.stationCode} ${s.stationName || ''}`" :value="s.stationCode" />
+              <template #empty>
+                <div style="padding: 8px; text-align: center">
+                  <el-button size="small" type="primary" link @click="manualInput = true">未找到？点击手动输入</el-button>
+                </div>
+              </template>
+            </el-select>
+            <el-input v-else v-model="dataForm.stationId" placeholder="手动输入区站号">
+              <template #suffix>
+                <el-button size="small" link @click="manualInput = false">列表选择</el-button>
+              </template>
+            </el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -13,31 +26,42 @@
           </el-form-item>
         </el-col>
 
-        <el-divider content-position="left">气温数据 (℃)</el-divider>
+        <el-divider content-position="left">温湿度与气压</el-divider>
 
-        <el-col :span="8">
+        <el-col :span="12">
+          <el-form-item label="相对湿度" prop="avgTemp" label-width="80px">
+            <el-input-number v-model="dataForm.relativeHumidity" :precision="1" :step="0.1" controls-position="right" style="width: 100%"></el-input-number>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="气压" prop="avgTemp" label-width="80px">
+            <el-input-number v-model="dataForm.atmospheres" :precision="1" :step="0.1" controls-position="right" style="width: 100%"></el-input-number>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
           <el-form-item label="平均气温" prop="avgTemp" label-width="80px">
             <el-input-number v-model="dataForm.avgTemp" :precision="1" :step="0.1" controls-position="right" style="width: 100%"></el-input-number>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="12">
           <el-form-item label="最高气温" prop="maxTemp" label-width="80px">
             <el-input-number v-model="dataForm.maxTemp" :precision="1" :step="0.1" controls-position="right" style="width: 100%"></el-input-number>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
-          <el-form-item label="出现时刻" prop="maxTempTime" label-width="80px">
-            <el-input v-model="dataForm.maxTempTime" placeholder="HHmm"></el-input>
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="8">
+        <el-col :span="12">
           <el-form-item label="最低气温" prop="minTemp" label-width="80px">
             <el-input-number v-model="dataForm.minTemp" :precision="1" :step="0.1" controls-position="right" style="width: 100%"></el-input-number>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
-          <el-form-item label="出现时刻" prop="minTempTime" label-width="80px">
+        <el-col :span="12">
+          <el-form-item label="最高气温出现时间" prop="maxTempTime" label-width="125px">
+            <el-input v-model="dataForm.maxTempTime" placeholder="HHmm"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最低气温出现时间" prop="minTempTime" label-width="125px">
             <el-input v-model="dataForm.minTempTime" placeholder="HHmm"></el-input>
           </el-form-item>
         </el-col>
@@ -56,15 +80,49 @@
         </el-col>
 
         <el-col :span="12">
-          <el-form-item label="最大风速(m/s)" prop="maxWindSpeed">
+          <el-form-item label="日平均风速" prop="maxWindSpeed">
+            <el-input-number v-model="dataForm.dayAvgWindSpeed" :precision="1" :min="0" style="width: 100%"></el-input-number>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="日平均风向" prop="maxWindSpeed">
+            <el-input-number v-model="dataForm.dayAvgWindDirection" :precision="1" :min="0" style="width: 100%"></el-input-number>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="最大风速" prop="maxWindSpeed">
             <el-input-number v-model="dataForm.maxWindSpeed" :precision="1" :min="0" style="width: 100%"></el-input-number>
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="风向(角度)" prop="maxWindDirection">
+          <el-form-item label="最大风速风向" prop="maxWindDirection">
             <el-input-number v-model="dataForm.maxWindDirection" :min="0" :max="360" style="width: 100%"></el-input-number>
           </el-form-item>
         </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="极大风速" prop="maxWindSpeed">
+            <el-input-number v-model="dataForm.extremeWindSpeed" :precision="1" :min="0" style="width: 100%"></el-input-number>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="极大风速风向" prop="maxWindSpeed">
+            <el-input-number v-model="dataForm.extremeWindDirection" :precision="1" :min="0" style="width: 100%"></el-input-number>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="极大风速出现时间" prop="minTempTime" label-width="125px">
+            <el-input v-model="dataForm.extremeWindTime" placeholder="HHmm"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大风速出现时间" prop="minTempTime" label-width="125px">
+            <el-input v-model="dataForm.maxWindTime" placeholder="HHmm"></el-input>
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <template #footer>
@@ -75,50 +133,72 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import baseService from "@/service/baseService";
 import { ElMessage } from "element-plus";
 
 const emit = defineEmits(["refreshDataList"]);
 const visible = ref(false);
 const dataFormRef = ref();
+const stationOptions = ref<any[]>([]);
+const manualInput = ref(false);
 
 const dataForm = reactive({
-  id: '',
-  stationId: '',
-  observeDate: '',
+  id: "",
+  stationId: "",
+  observeDate: "",
   avgTemp: 0,
   maxTemp: 0,
-  maxTempTime: '',
+  maxTempTime: "",
   minTemp: 0,
-  minTempTime: '',
+  minTempTime: "",
   rain2020: 0,
   rain0808: 0,
+  relativeHumidity: 0,
+  atmospheres: 0,
+  dayAvgWindSpeed: 0,
+  dayAvgWindDirection: 0,
   maxWindSpeed: 0,
   maxWindDirection: 0,
-  maxWindTime: '',
+  maxWindTime: "",
   extremeWindSpeed: 0,
   extremeWindDirection: 0,
-  extremeWindTime: '',
-  createDate: ''
+  extremeWindTime: "",
+  createDate: ""
 });
 
 // 校验规则优化
 const rules = ref({
-  stationId: [{ required: true, message: '站点不能为空', trigger: 'blur' }],
-  observeDate: [{ required: true, message: '观测日期不能为空', trigger: 'change' }],
+  stationId: [{ required: true, message: "站点不能为空", trigger: "blur" }],
+  observeDate: [{ required: true, message: "观测日期不能为空", trigger: "change" }],
   // 时刻格式简单校验 (HHmm)
-  maxTempTime: [{ pattern: /^([01]\d|2[0-3])[0-5]\d$/, message: '格式应为HHmm(如0715)', trigger: 'blur' }],
-  minTempTime: [{ pattern: /^([01]\d|2[0-3])[0-5]\d$/, message: '格式应为HHmm(如1430)', trigger: 'blur' }]
+  maxTempTime: [{ pattern: /^([01]\d|2[0-3])[0-5]\d$/, message: "格式应为HHmm(如0715)", trigger: "blur" }],
+  minTempTime: [{ pattern: /^([01]\d|2[0-3])[0-5]\d$/, message: "格式应为HHmm(如1430)", trigger: "blur" }]
+});
+
+function getStationList() {
+  return baseService.get("/station/weatherstation/list").then((res) => {
+    stationOptions.value = res.data || [];
+  });
+}
+
+onMounted(() => {
+  getStationList();
 });
 
 const init = (id?: number) => {
   visible.value = true;
-  // 重置表单，清空之前的 ID 和数据
+  manualInput.value = false;
   dataForm.id = "";
   Object.assign(dataForm, {
-    avgTemp: 0, maxTemp: 0, minTemp: 0, rain2020: 0, rain0808: 0,
-    maxWindSpeed: 0, maxWindDirection: 0, extremeWindSpeed: 0
+    avgTemp: 0,
+    maxTemp: 0,
+    minTemp: 0,
+    rain2020: 0,
+    rain0808: 0,
+    maxWindSpeed: 0,
+    maxWindDirection: 0,
+    extremeWindSpeed: 0
   });
 
   if (dataFormRef.value) {
@@ -143,7 +223,7 @@ const dataFormSubmitHandle = () => {
     const action = !dataForm.id ? baseService.post : baseService.put;
     action("/dailyweather/weatherdailydata", dataForm).then((res) => {
       ElMessage.success({
-        message: '提交成功',
+        message: "提交成功",
         duration: 800,
         onClose: () => {
           visible.value = false;
diff --git a/src/views/dailyweather/weatherdailydata-import.vue b/src/views/dailyweather/weatherdailydata-import.vue
index 704102c..cb77826 100644
--- a/src/views/dailyweather/weatherdailydata-import.vue
+++ b/src/views/dailyweather/weatherdailydata-import.vue
@@ -11,19 +11,20 @@
       :limit="1"
       :on-exceed="handleExceed"
       accept=".xlsx, .xls"
+      :disabled="loading"
     >
       <el-icon class="el-icon--upload"><upload-filled /></el-icon>
       <div class="el-upload__text">将文件拖到此处，或 <em>点击选择</em></div>
       <template #tip>
         <div class="el-upload__tip" style="text-align: center;">
-          只能上传 Excel 文件，且不超过 10MB
+          只能上传 Excel 文件
         </div>
       </template>
     </el-upload>
 
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
+        <el-button :disabled="loading" @click="visible = false">取消</el-button>
         <el-button type="primary" :loading="loading" @click="dataFormSubmitHandle">确定</el-button>
       </span>
     </template>
@@ -33,7 +34,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
-import baseService from "@/service/baseService"; // 确保路径对应你的项目
+import baseService from "@/service/baseService";
+import { useImportTaskStore } from "@/store/importTasks";
+
+const taskStore = useImportTaskStore();
+const POLL_INTERVAL = 3000;
 
 const visible = ref(false);
 const loading = ref(false);
@@ -41,49 +46,100 @@ const uploadRef = ref();
 const fileRaw = ref<File | null>(null);
 const emit = defineEmits(['refreshDataList']);
 
-// 初始化
 const init = () => {
   visible.value = true;
   fileRaw.value = null;
   if(uploadRef.value) uploadRef.value.clearFiles();
 };
 
-// 监听文件选择状态
 const handleChange = (file: any) => {
   fileRaw.value = file.raw;
 };
 
-// 限制只能选一个文件，选新文件替换旧文件
 const handleExceed = (files: any) => {
   uploadRef.value!.clearFiles();
   const file = files[0];
   uploadRef.value!.handleStart(file);
 };
 
+function pollProgress(taskId: string, localTaskId: string) {
+  const timer = setInterval(async () => {
+    try {
+      const res = await baseService.get(`/dailyweather/weatherdailydata/import/progress/${taskId}`);
+      if (res?.code === 0 && res.data) {
+        const { totalRows, processedRows, errorMessage } = res.data;
+        const st = (res.data.status || "").toUpperCase();
+        taskStore.updateTask(localTaskId, {
+          totalRows: totalRows || 0,
+          processedRows: typeof processedRows === "object" ? 0 : (processedRows || 0)
+        });
+        if (st === "COMPLETED") {
+          clearInterval(timer);
+          taskStore.updateTask(localTaskId, { status: "success", message: "导入成功", completedAt: Date.now() });
+          emit("refreshDataList");
+        } else if (st === "FAILED" || st === "ERROR") {
+          clearInterval(timer);
+          taskStore.updateTask(localTaskId, { status: "error", message: errorMessage || "导入失败", completedAt: Date.now() });
+        } else {
+          const processed = typeof processedRows === "object" ? 0 : (processedRows || 0);
+          const total = totalRows || 0;
+          const pct = total > 0 ? Math.round((processed / total) * 100) : 0;
+          taskStore.updateTask(localTaskId, { message: `正在导入数据 ${pct}% (${processed}/${total})` });
+        }
+      }
+    } catch {
+      // keep polling on network error
+    }
+  }, POLL_INTERVAL);
+  return timer;
+}
+
 const dataFormSubmitHandle = () => {
   if (!fileRaw.value) {
     return ElMessage.warning("请先选择文件");
   }
 
-  loading.value = true;
+  const localTaskId = Date.now().toString() + Math.random().toString(36).slice(2, 6);
+  taskStore.addTask({
+    id: localTaskId,
+    fileName: fileRaw.value.name,
+    status: "uploading",
+    message: "正在上传文件...",
+    totalRows: 0,
+    processedRows: 0,
+    createdAt: Date.now(),
+    completedAt: null,
+    backendTaskId: ""
+  });
+
+  visible.value = false;
+
   const formData = new FormData();
-  // 这里的 "file" 必须和后端 Controller 的 @RequestParam("file") 名字一致
   formData.append("file", fileRaw.value);
 
-  // 注意：很多封装好的 baseService 在 post 时会自动序列化 data
-  // 尝试直接发送 formData，不要加额外的 {} 包装
   baseService.upload("/dailyweather/weatherdailydata/import", formData)
-    .then(() => {
-      ElMessage.success("导入成功");
-      visible.value = false;
-      emit("refreshDataList");
+    .then((res: any) => {
+      if (res?.code === 0) {
+        const backendTaskId = res.data?.taskId || res.data?.toString() || "";
+        if (backendTaskId) {
+          taskStore.updateTask(localTaskId, {
+            status: "processing",
+            message: "正在导入数据...",
+            backendTaskId
+          });
+          pollProgress(backendTaskId, localTaskId);
+        } else {
+          taskStore.updateTask(localTaskId, { status: "success", message: "导入成功", completedAt: Date.now() });
+          emit("refreshDataList");
+        }
+      } else {
+        taskStore.updateTask(localTaskId, { status: "error", message: res?.msg || "导入失败", completedAt: Date.now() });
+        ElMessage.error(res?.msg || "导入失败");
+      }
     })
-    .catch((err) => {
-      // 捕获具体报错
+    .catch((err: any) => {
+      taskStore.updateTask(localTaskId, { status: "error", message: err?.message || "网络错误", completedAt: Date.now() });
       console.error("上传细节错误:", err);
-    })
-    .finally(() => {
-      loading.value = false;
     });
 };
 
diff --git a/src/views/dailyweather/weatherdailydata.vue b/src/views/dailyweather/weatherdailydata.vue
index c5c4c3a..55e22ac 100644
--- a/src/views/dailyweather/weatherdailydata.vue
+++ b/src/views/dailyweather/weatherdailydata.vue
@@ -1,6 +1,20 @@
 <template>
   <div class="mod-dailyweather__weatherdailydata">
     <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
+      <el-form-item>
+        <el-select v-model="realDataForm.stationId" multiple filterable remote reserve-keyword clearable placeholder="请输入区站名称" :remote-method="remoteSearchStation" :loading="loading" style="width: 300px">
+          <el-option v-for="item in stationOptions" :key="item.stationCode" :label="`${item.stationName}`" :value="item.stationCode" />
+        </el-select>
+      </el-form-item>
+
+<!--      <el-form-item>-->
+<!--        <el-date-picker v-model="realDataForm.observeDate" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" :default-time="[new Date(2000, 1, 1), new Date(2000, 1, 1)]" style="width: 360px" />-->
+<!--      </el-form-item>-->
+
+      <el-form-item>
+        <el-button @click="state.getDataList">查询</el-button>
+      </el-form-item>
+
       <el-form-item>
         <el-button v-if="state.hasPermission('dailyweather:weatherdailydata:save')" type="primary" icon="Plus" @click="addOrUpdateHandle()">新增</el-button>
         <el-button v-if="state.hasPermission('dailyweather:weatherdailydata:delete')" type="danger" icon="Delete" @click="state.deleteHandle()">批量删除</el-button>
@@ -16,12 +30,7 @@
             <div v-for="group in columnGroups" :key="group.title" class="column-group">
               <div class="group-title">{{ group.title }}</div>
               <el-checkbox-group v-model="selectedColumns">
-                <el-checkbox
-                  v-for="col in group.columns"
-                  :key="col.prop"
-                  :label="col.prop"
-                  style="width: 120px"
-                >
+                <el-checkbox v-for="col in group.columns" :key="col.prop" :label="col.prop" style="width: 120px">
                   {{ col.label }}
                 </el-checkbox>
               </el-checkbox-group>
@@ -35,27 +44,12 @@
       </el-form-item>
     </el-form>
 
-    <el-table
-      v-loading="state.dataListLoading"
-      :data="state.dataList"
-      border
-      @selection-change="state.dataListSelectionChangeHandle"
-      style="width: 100%"
-    >
+    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
       <el-table-column type="selection" header-align="center" align="center" width="50" fixed="left"></el-table-column>
 
       <template v-for="group in columnGroups">
         <template v-for="item in group.columns">
-          <el-table-column
-            v-if="selectedColumns.includes(item.prop)"
-            :key="item.prop"
-            :prop="item.prop"
-            :label="item.label"
-            header-align="center"
-            align="center"
-            min-width="120"
-            show-overflow-tooltip
-          >
+          <el-table-column v-if="selectedColumns.includes(item.prop)" :key="item.prop" :prop="item.prop" :label="item.label" header-align="center" align="center" min-width="120" show-overflow-tooltip>
             <template #default="scope">
               <span v-if="item.prop === 'observeDate'">
                 {{ formatObserveDate(scope.row.observeDate) }}
@@ -68,7 +62,10 @@
                 <span v-else>--</span>
               </span>
 
-              <span v-else>{{ scope.row[item.prop] ?? '--' }}</span>
+              <span v-else-if="item.prop === 'dayAvgWindDirection' || item.prop === 'maxWindDirection'">
+                {{ windDirectionLabel(scope.row[item.prop]) }}
+              </span>
+              <span v-else>{{ scope.row[item.prop] ?? "--" }}</span>
             </template>
           </el-table-column>
         </template>
@@ -82,15 +79,7 @@
       </el-table-column>
     </el-table>
 
-    <el-pagination
-      :current-page="state.page"
-      :page-sizes="[10, 20, 50, 100]"
-      :page-size="state.limit"
-      :total="state.total"
-      layout="total, sizes, prev, pager, next, jumper"
-      @size-change="state.pageSizeChangeHandle"
-      @current-change="state.pageCurrentChangeHandle"
-    />
+    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle" />
 
     <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList" />
     <import-excel ref="importExcelRef" @refreshDataList="state.getDataList" />
@@ -99,94 +88,171 @@
 
 <script lang="ts" setup>
 import useView from "@/hooks/useView";
-import { reactive, ref, toRefs, watch, onMounted } from "vue";
+import { reactive, ref, toRefs, watch, onMounted, computed } from "vue";
 import AddOrUpdate from "./weatherdailydata-add-or-update.vue";
 import ImportExcel from "./weatherdailydata-import.vue";
+import baseService from "@/service/baseService";
+import { useAppStore } from "@/store";
+
+const _store = useAppStore();
+function _windDirectionCode(deg: any) {
+  if (deg == null || deg === "" || isNaN(deg)) return null;
+  const d = Number(deg);
+  if (d < 0 || d > 360) return null;
+  return ["N", "NE", "E", "SE", "S", "SW", "W", "NW"][Math.floor((d + 22.5) / 45) % 8];
+}
+function windDirectionLabel(deg: any) {
+  const code = _windDirectionCode(deg);
+  if (!code) return "—";
+  const type = _store.state.dicts.find((d: any) => d.dictType === "wind_direction_type");
+  const entry = type?.dataList?.find((e: any) => e.dictValue === code);
+  return entry?.dictLabel || code;
+}
 
 const columnGroups = [
   {
-    title: '基础信息',
+    title: "基础信息",
     columns: [
-      { prop: 'stationId', label: '区站号', default: true },
-      { prop: 'stationName', label: '站名', default: true },
-      { prop: 'observeDate', label: '观测日期', default: true },
-      { prop: 'createDate', label: '创建时间', default: false },
-      { prop: 'id', label: '系统编号', default: false }
+      { prop: "stationId", label: "区站号", default: true },
+      { prop: "stationName", label: "站名", default: true },
+      { prop: "observeDate", label: "观测日期", default: true },
+      { prop: "createDate", label: "创建时间", default: false },
+      { prop: "id", label: "系统编号", default: false }
     ]
   },
   {
-    title: '气温数据',
+    title: "温湿度气压数据",
     columns: [
-      { prop: 'avgTemp', label: '平均气温', default: true },
-      { prop: 'maxTemp', label: '最高气温', default: true },
-      { prop: 'maxTempTime', label: '最高气温时间', default: false },
-      { prop: 'minTemp', label: '最低气温', default: true },
-      { prop: 'minTempTime', label: '最低气温时间', default: false }
+      { prop: "avgTemp", label: "平均气温", default: true },
+      { prop: "maxTemp", label: "最高气温", default: true },
+      { prop: "minTemp", label: "最低气温", default: true },
+      { prop: "maxTempTime", label: "最高气温时间", default: false },
+      { prop: "minTempTime", label: "最低气温时间", default: false },
+      { prop: "relativeHumidity", label: "相对湿度", default: true },
+      { prop: "atmospheres", label: "气压", default: true }
     ]
   },
   {
-    title: '降水/风力数据',
+    title: "降水/风力数据",
     columns: [
-      { prop: 'rain2020', label: '20-20降水', default: true },
-      { prop: 'rain0808', label: '08-08降水', default: true },
-      { prop: 'maxWindSpeed', label: '最大风速', default: false },
-      { prop: 'maxWindDirection', label: '最大风向', default: false },
-      { prop: 'maxWindTime', label: '最大风时间', default: false },
-      { prop: 'extremeWindSpeed', label: '极大风速', default: false },
-      { prop: 'extremeWindTime', label: '极大风时间', default: false }
+      { prop: "rain2020", label: "20-20降水", default: false },
+      { prop: "rain0808", label: "08-08降水", default: false },
+      { prop: "dayAvgWindSpeed", label: "日平均风速", default: true },
+      { prop: "dayAvgWindDirection", label: "日平均风向", default: true },
+      { prop: "maxWindSpeed", label: "最大风速", default: false },
+      { prop: "maxWindDirection", label: "最大风向", default: false },
+      { prop: "maxWindTime", label: "最大风时间", default: false },
+      { prop: "extremeWindSpeed", label: "极大风速", default: false },
+      { prop: "extremeWindTime", label: "极大风时间", default: false }
     ]
   }
 ];
 
 // 智能日期截取
 const formatObserveDate = (dateStr: any) => {
-  if (!dateStr) return '--';
+  if (!dateStr) return "--";
   const str = String(dateStr);
-  const separator = str.includes('T') ? 'T' : ' ';
+  const separator = str.includes("T") ? "T" : " ";
   return str.split(separator)[0];
 };
 
 // 校验有效时间数字
 const isValidTime = (val: any) => {
-  return val !== null && val !== undefined && val !== '' && !isNaN(Number(val));
+  return val !== null && val !== undefined && val !== "" && !isNaN(Number(val));
 };
 
 // 时刻格式化：712 -> 07:12
 const formatWeatherTime = (time: any) => {
   let timeStr = String(time);
-  if (timeStr.length === 3) timeStr = '0' + timeStr;
+  if (timeStr.length === 3) timeStr = "0" + timeStr;
   if (timeStr.length === 4) {
     return `${timeStr.substring(0, 2)}:${timeStr.substring(2, 4)}`;
   }
   return timeStr;
 };
+interface WeatherStation {
+  stationName: string;
+  stationCode: string;
+}
+const loading = ref(false);
+const stationOptions = ref<WeatherStation[]>([]); // 明确这是一个 WeatherStation 对象的数组
+/**
+ * 远程搜索区站
+ */
+const remoteSearchStation = async (keyword: string) => {
+  loading.value = true;
+  try {
+    const res = await baseService.get("/station/weatherstation/list");
+    if (res.code === 0) {
+      // TypeScript 自动知道 item 是 WeatherStation 类型
+      stationOptions.value = res.data.filter((item: { stationName: string | string[]; stationCode: string | string[] }) => !keyword || item.stationName.includes(keyword) || item.stationCode.includes(keyword));
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 1. 定义真实的表单数据（保持数组，供 <el-select multiple> 正常绑定）
+const realDataForm = reactive({
+  stationId: "",
+  // observeDate: Date,
+  // startTime: "",
+  // endTime:""
+});
+
+// 2. 使用 computed 动态派生出“用于请求的 dataForm”
+// 只要 realDataForm 发生变化，这个 computed 就会自动重新计算
+const computedDataForm = computed(() => {
+  const params = { ...realDataForm };
+
+  // 核心转换逻辑：如果 stationId 是数组，就 join 成字符串
+  if (Array.isArray(params.stationId)) {
+    params.stationId = params.stationId.join(",");
+  }
+  // 处理时间区间：将数组拆分为两个独立字段
+  if (Array.isArray(params.observeDate) && params.observeDate.length === 2) {
+    params.startTime = params.observeDate[0];
+    params.endTime = params.observeDate[1];
+  } else {
+    params.startTime = "";
+    params.endTime = "";
+  }
+
+  return params;
+});
 
 const view = reactive({
   deleteIsBatch: true,
   getDataListURL: "/dailyweather/weatherdailydata/page",
   getDataListIsPage: true,
   exportURL: "/dailyweather/weatherdailydata/export",
-  deleteURL: "/dailyweather/weatherdailydata"
+  deleteURL: "/dailyweather/weatherdailydata",
+  dataForm: computedDataForm
 });
-
 const state = reactive({ ...useView(view), ...toRefs(view) });
 
 const getDefaultColumns = () => {
   const defaultCols: string[] = [];
-  columnGroups.forEach(g => {
-    g.columns.forEach(c => { if(c.default) defaultCols.push(c.prop) });
+  columnGroups.forEach((g) => {
+    g.columns.forEach((c) => {
+      if (c.default) defaultCols.push(c.prop);
+    });
   });
   return defaultCols;
 };
 
 const selectedColumns = ref<string[]>(getDefaultColumns());
 
-watch(selectedColumns, (newVal) => {
-  localStorage.setItem('weather_column_pref', JSON.stringify(newVal));
-}, { deep: true });
+watch(
+  selectedColumns,
+  (newVal) => {
+    localStorage.setItem("weather_column_pref", JSON.stringify(newVal));
+  },
+  { deep: true }
+);
 
 onMounted(() => {
-  const cache = localStorage.getItem('weather_column_pref');
+  const cache = localStorage.getItem("weather_column_pref");
   if (cache) {
     selectedColumns.value = JSON.parse(cache);
   }
diff --git a/src/views/home.vue b/src/views/home.vue
index 1934403..641d1aa 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,521 +1,2048 @@
 <template>
-  <div class="container">
-    <el-card class="header-card" shadow="never">
-      <div class="header-content">
-        <div class="title-main-zone">
-          <div class="calendar-icon-box">
-            <div class="cal-top">{{ today.month }}月</div>
-            <div class="cal-body">{{ today.day }}</div>
+  <div class="weather-app" ref="appRoot" v-loading="loading">
+    <!-- ==================== 顶部 ==================== -->
+    <header class="app-header">
+      <div class="header-inner">
+        <div class="header-left">
+          <div class="cal-icon today-icon">
+            <div class="cal-month">{{ anchorMonth }}月</div>
+            <div class="cal-day">{{ padDay }}</div>
           </div>
-
-          <div class="title-text-group">
-            <div class="top-row">
-              <h2 class="main-title">{{ isRegionalMode ? '全域气象汇总对比' : '单站气象历史回溯' }}</h2>
-
-              <el-tag :type="isRegionalMode ? 'warning' : ''" effect="light" class="current-location-tag">
-                <i class="el-icon-map-location"></i>
-                {{ isRegionalMode ? '全市汇总 (郴州市)' : currentStationName }}
-              </el-tag>
-
-              <el-tag :type="isRegionalMode ? 'warning' : 'success'" effect="dark" size="small">
-                {{ isRegionalMode ? '市级' : '县级' }}
-              </el-tag>
-            </div>
-
-            <div class="bottom-row">
-              <template v-if="!isRegionalMode">
-                  <span class="info-item clickable">
-                    <i class="el-icon-edit-outline"></i>
-                    <el-select v-model="selectedStation" size="mini" class="inline-select" @change="refreshData">
-                      <el-option v-for="item in stations" :key="item.id" :label="item.name" :value="item.id"/>
-                    </el-select>
-                  </span>
-                <el-divider direction="vertical"/>
+          <div class="header-titles">
+            <h1 class="page-title"><span class="title-sep"></span>历年今日 · 气象分析</h1>
+            <div class="header-meta">
+              <span class="meta-chip"
+                ><el-icon><Location /></el-icon>{{ currentAreaLabel }}</span
+              >
+              <span class="meta-divider"></span>
+              <span class="meta-chip"
+                ><el-icon><Calendar /></el-icon>每年 <b>{{ anchorMonth }}月{{ padDay }}日</b> 这一天</span
+              >
+              <span class="meta-divider"></span>
+              <span class="meta-chip"
+                ><el-icon><Calendar /></el-icon>{{ computedStartYear }}–{{ computedEndYear }}（{{ computedSpan }}年）</span
+              >
+              <template v-if="hasActiveFilter">
+                <span class="meta-divider"></span>
+                <span class="meta-chip filter-hint"
+                  ><el-icon><Filter /></el-icon>已筛选 {{ filteredRows.length }}/{{ pageState.weatherData.length }}</span
+                >
               </template>
-
-              <span class="info-item"><i class="el-icon-date"></i> 锚点：历年今日</span>
-              <el-divider direction="vertical"/>
-              <span class="info-item">
-                <i class="el-icon-time"></i>
-                  范围：过去 {{ backwardYears }} 年 ({{ startYear }}-{{ currentYear }})
-              </span>
             </div>
           </div>
         </div>
-
-        <div class="control-panel">
-          <el-radio-group v-model="mode" size="small" @change="handleModeChange" class="mode-switch">
-            <el-radio-button label="single">单站</el-radio-button>
-            <el-radio-button label="regional">全域</el-radio-button>
-          </el-radio-group>
-
-          <el-select
-            v-model="backwardYears"
-            size="small"
-            class="year-select"
-            filterable
-            allow-create
-            default-first-option
-            placeholder="请选择或输入年限"
-            @change="handleYearChange"
-          >
-            <el-option
-              v-for="y in [10, 15, 30, 50, 60]"
-              :key="y"
-              :label="'回溯' + y + '年'"
-              :value="y"
-            />
-          </el-select>
-
-          <el-button-group style="margin-left: 20px">
-            <el-button type="primary" size="small" icon="el-icon-picture" @click="handleExport('png')">保存图片
-            </el-button>
-            <el-button type="warning" size="small" icon="el-icon-document" @click="handleExport('pdf')">导出PDF
-            </el-button>
-          </el-button-group>
+        <div class="header-right">
+          <el-dropdown trigger="click" @command="doExport">
+            <el-button size="small" :icon="Download"
+              >导出<el-icon class="el-icon--right"><ArrowDown /></el-icon
+            ></el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="png">保存为图片 (PNG)</el-dropdown-item>
+                <el-dropdown-item command="pdf">导出为 PDF</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
       </div>
-    </el-card>
+    </header>
 
-    <el-row :gutter="20">
-      <el-col :span="16">
-        <el-card class="module-card">
-          <div slot="header" class="card-header">
-            <span><i class="el-icon-data-analysis"></i> {{ chartTitle }}</span>
-            <span class="unit-text">(雨: mm / 温: ℃)</span>
-          </div>
-          <div ref="mainChartRef" class="chart-box"></div>
-        </el-card>
-
-        <el-card class="module-card table-module">
-          <div slot="header" class="table-header">
-            <span class="table-title"><i class="el-icon-tickets"></i> 详细实况清单 ({{ currentAreaLabel }})</span>
-            <el-link type="primary" :underline="false" @click="isTableExpanded = !isTableExpanded">
-              {{ isTableExpanded ? '收起历史数据' : '查看全部 ' + tableData.length + ' 条' }}
-              <i :class="isTableExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
-            </el-link>
-          </div>
-
-          <el-table :data="displayTableData" size="small" border stripe :max-height="isTableExpanded ? 600 : 250">
-            <el-table-column v-if="isRegionalMode" prop="stationName" label="观测站点" align="center"/>
-            <el-table-column v-else prop="fullDate" label="观测日期" width="150" align="center">
-              <template #default="scope">
-                <span class="date-cell">{{ scope.row.fullDate }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="rainfall" label="当日降雨" align="center" sortable>
-              <template #default="scope">{{ scope.row.rainfall }} mm</template>
-            </el-table-column>
-            <el-table-column prop="tmax" label="最高气温" align="center">
-              <template #default="scope">{{ scope.row.tmax }} ℃</template>
-            </el-table-column>
-            <el-table-column prop="tavg" label="平均气温" align="center"/>
-            <el-table-column prop="tmin" label="最低气温" align="center"/>
-          </el-table>
-        </el-card>
-      </el-col>
-
-      <el-col :span="8">
-        <el-card class="module-card summary-card">
-          <div slot="header"><b><i class="el-icon-document"></i> 摘要总结</b></div>
-          <div class="summary-text">{{ summaryText }}</div>
-        </el-card>
-
-        <el-card class="module-card disaster-card">
-          <div slot="header"><b><i class="el-icon-message-solid"></i> 灾情回溯</b></div>
-          <el-timeline class="custom-timeline">
-            <el-timeline-item
-              v-for="(item, index) in disasterData"
-              :key="index"
-              :timestamp="item.year + '年今日'"
-              placement="top"
-              color="#F56C6C"
-            >
-              <div class="disaster-box">
-                <div class="tag-row">
-                  <el-tag v-for="tag in item.tags" :key="tag" size="mini" effect="dark" :color="getTagColor(tag)"
-                          class="m-tag">
-                    {{ tag }}
-                  </el-tag>
-                </div>
-                <p class="disaster-info">
-                  区域：{{ item.area }}
-                  <el-divider direction="vertical"/>
-                  损失：<span class="loss-val">{{ item.loss }}万</span>
-                </p>
+    <div class="app-body">
+      <!-- ==================== 历年今日 Hero ==================== -->
+      <section class="today-hero">
+        <div class="hero-badge-row">
+          <span class="hero-date-badge">每年的 {{ anchorMonth }}月{{ padDay }}日</span>
+          <span class="hero-span-badge">{{ computedStartYear }}–{{ computedEndYear }}，共 {{ computedSpan }} 年</span>
+        </div>
+        <h2 class="hero-headline">
+          历年「<b class="hero-date-em">{{ anchorMonth }}月{{ padDay }}日</b>」情况
+        </h2>
+        <p class="hero-desc">
+          {{ currentAreaLabel }} 过去 <b>{{ computedSpan }}</b> 年间，每年此日的气象实况，共 <b>{{ pageState.weatherData.length }}</b> 条单日数据。 其中 <b>{{ pageState.stats.rainyCount }}</b> 年当天出现降水（占比 {{ pageState.stats.rainyPct }}%），最大单日降雨
+          <b>{{ pageState.stats.maxRain }}</b> mm（{{ pageState.stats.maxRainYear }}年），历史单日最高温 <b class="hot">{{ pageState.stats.maxTmax }}℃</b>（{{ pageState.stats.maxTmaxYear }}年）， 历史单日最低温 <b class="cold">{{ pageState.stats.minTmin }}℃</b>（{{
+            pageState.stats.minTminYear
+          }}年）。
+        </p>
+        <div class="hero-stats">
+          <div class="hero-stat-group" v-for="(g, gi) in statCards" :key="gi">
+            <div class="hero-stat" v-for="c in g.items" :key="c.label">
+              <div class="hs-label">{{ c.label }}</div>
+              <div class="hs-val" :style="{ color: c.color }">
+                {{ c.value }}<span class="hs-unit">{{ c.unit }}</span>
               </div>
-            </el-timeline-item>
-          </el-timeline>
-        </el-card>
-      </el-col>
-    </el-row>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ==================== 气象站 + 跨度 ==================== -->
+      <section class="control-bar">
+        <div class="cb-group">
+          <span class="cb-label"
+            ><el-icon><OfficeBuilding /></el-icon> 气象站</span
+          >
+          <div class="chip-group">
+            <span v-for="s in stations" :key="s.stationCode" class="chip" :class="{ active: selectedStation === s.stationCode }" @click="selectStation(s.stationCode)">{{ s.stationName }}</span>
+          </div>
+        </div>
+        <div class="cb-sep"></div>
+        <div class="cb-group">
+          <span class="cb-label"
+            ><el-icon><Calendar /></el-icon> 年份跨度</span
+          >
+          <div class="chip-group">
+            <span v-for="p in yearPresets" :key="p" class="chip" :class="{ active: yearSpan === p }" @click="setYearSpan(p)">{{ p }}年</span>
+          </div>
+          <el-input-number v-model="yearSpanInput" :min="1" :max="100" size="small" style="width: 10ch" controls-position="right" />
+          <el-button size="small" plain @click="applyManualSpan">应用</el-button>
+        </div>
+      </section>
+
+      <!-- ==================== 条件筛选 ==================== -->
+      <section class="filter-panel">
+        <div class="filter-header" @click="filterOpen = !filterOpen">
+          <div class="fh-left">
+            <el-icon><Operation /></el-icon><span>条件筛选</span>
+            <el-badge v-if="activeFilterCount > 0" :value="activeFilterCount" type="warning" />
+          </div>
+          <el-icon :class="['fh-arrow', { open: filterOpen }]"><ArrowDown /></el-icon>
+        </div>
+        <el-collapse-transition>
+          <div v-show="filterOpen" class="filter-body">
+            <div class="filter-grid">
+              <div class="filter-group">
+                <div class="fg-title"><span class="fg-dot rain"></span> 降雨条件</div>
+                <div class="fg-row">
+                  <span class="fg-label">降雨量</span>
+                  <el-select v-model="filters.rainfall.op" size="small" placeholder="不限" style="width: 8ch">
+                    <el-option label="不限" value="" /><el-option label="≥" value="gte" /><el-option label="≤" value="lte" />
+                    <el-option label="区间" value="range" />
+                  </el-select>
+                  <template v-if="filters.rainfall.op && filters.rainfall.op !== 'range'"> <el-input-number v-model="filters.rainfall.val" :min="0" :max="999" :step="5" size="small" style="width: 16ch" /><span class="fg-unit">mm</span> </template>
+                  <template v-if="filters.rainfall.op === 'range'">
+                    <el-input-number v-model="filters.rainfall.min" :min="0" :max="999" size="small" style="width: 14ch" />
+                    <span class="fg-sep">~</span>
+                    <el-input-number v-model="filters.rainfall.max" :min="0" :max="999" size="small" style="width: 14ch" /><span class="fg-unit">mm</span>
+                  </template>
+                </div>
+                <div class="fg-row">
+                  <span class="fg-label">雨量级别</span>
+                  <div class="level-chips">
+                    <span v-for="lv in rainLevelDefs" :key="lv.label" class="level-chip" :class="{ active: filters.rainLevel.includes(lv.label) }" @click="toggleRainLevel(lv)">{{ lv.label }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="filter-group">
+                <div class="fg-title"><span class="fg-dot temp"></span> 气温条件</div>
+                <div class="fg-row" v-for="tf in tempFilterFields" :key="tf.key">
+                  <span class="fg-label">{{ tf.label }}</span>
+                  <el-select v-model="filters[tf.key].op" size="small" placeholder="不限" style="width: 8ch">
+                    <el-option label="不限" value="" /><el-option label="≥" value="gte" /><el-option label="≤" value="lte" />
+                    <el-option v-if="tf.range" label="区间" value="range" />
+                  </el-select>
+                  <template v-if="filters[tf.key].op && filters[tf.key].op !== 'range'"> <el-input-number v-model="filters[tf.key].val" :min="-50" :max="60" :step="0.5" size="small" style="width: 16ch" /><span class="fg-unit">℃</span> </template>
+                  <template v-if="filters[tf.key].op === 'range'">
+                    <el-input-number v-model="filters[tf.key].min" :min="-50" :max="60" size="small" style="width: 14ch" />
+                    <span class="fg-sep">~</span>
+                    <el-input-number v-model="filters[tf.key].max" :min="-50" :max="60" size="small" style="width: 14ch" /><span class="fg-unit">℃</span>
+                  </template>
+                </div>
+              </div>
+              <div class="filter-group">
+                <div class="fg-title"><span class="fg-dot year-dot"></span> 年份条件</div>
+                <div class="fg-row">
+                  <span class="fg-label">年份范围</span>
+                  <el-input-number v-model="filters.yearRange[0]" :min="1960" :max="currentYear" size="small" style="width: 10ch" />
+                  <span class="fg-sep">~</span>
+                  <el-input-number v-model="filters.yearRange[1]" :min="1960" :max="currentYear" size="small" style="width: 10ch" />
+                </div>
+                <div class="fg-row">
+                  <span class="fg-label">年代筛选</span>
+                  <div class="level-chips">
+                    <span v-for="d in availableDecades" :key="d" class="level-chip" :class="{ active: filters.decades.includes(d) }" @click="toggleDecade(d)">{{ d }}s</span>
+                    <span class="level-chip" @click="filters.decades = []">全部</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="filter-actions">
+              <div class="fa-result" v-if="hasActiveFilter">
+                <el-icon><InfoFilled /></el-icon> 命中 <b>{{ filteredRows.length }}</b
+                >/{{ pageState.weatherData.length }} 条<span v-if="filteredRows.length === 0" class="no-hit">— 无匹配</span>
+              </div>
+              <div class="fa-btns">
+                <el-button size="small" @click="resetFilters"
+                  ><el-icon><RefreshRight /></el-icon> 重置</el-button
+                >
+                <el-button size="small" type="primary" @click="filterOpen = false"
+                  ><el-icon><ArrowUp /></el-icon> 收起</el-button
+                >
+              </div>
+            </div>
+          </div>
+        </el-collapse-transition>
+      </section>
+
+      <!-- ==================== 主体 ==================== -->
+      <div class="main-grid">
+        <div class="col-main">
+          <el-card class="mod-card" shadow="never">
+            <template #header>
+              <div class="card-hd">
+                <span class="card-hd-title"
+                  ><el-icon><DataAnalysis /></el-icon> 历年每个「{{ anchorMonth }}月{{ padDay }}日」单日气温与降雨</span
+                >
+                <span class="card-hd-unit">（降雨 mm / 气温 ℃）</span>
+              </div>
+            </template>
+            <div ref="chartRef" class="chart-box"></div>
+          </el-card>
+
+          <el-card class="mod-card table-card" shadow="never">
+            <template #header>
+              <div class="table-hd">
+                <div class="table-hd-left">
+                  <el-icon><Tickets /></el-icon>
+                  <span
+                    >历年 {{ anchorMonth }}月{{ padDay }}日 单日实况
+                    <template v-if="!tableExpanded">（预览前 {{ previewCount }} 条）</template>
+                    <template v-else>（全部 {{ displayRows.length }} 条）</template>
+                  </span>
+                  <el-tag v-if="hasActiveFilter" type="warning" size="small" effect="plain" style="margin-left: 8px">筛选中</el-tag>
+                </div>
+                <div class="table-hd-right">
+                  <el-switch v-if="hasActiveFilter" v-model="showOnlyFiltered" active-text="仅命中" inactive-text="全部" size="small" style="margin-right: 12px" />
+                  <el-button :type="tableExpanded ? 'primary' : 'default'" size="small" plain @click="tableExpanded = !tableExpanded">
+                    {{ tableExpanded ? "收起表格" : "展开全部" }}
+                    <el-icon style="margin-left: 4px"><component :is="tableExpanded ? ArrowUp : ArrowDown" /></el-icon>
+                  </el-button>
+                </div>
+              </div>
+              <div v-if="hasActiveFilter" class="filter-stats-bar">
+                <el-icon><DataLine /></el-icon>
+                命中统计 — 平均降雨: <b class="blue">{{ fStats.avgRain }} mm</b> · 平均最高温: <b class="red">{{ fStats.avgTmax }}℃</b> · 最大降雨: <b>{{ fStats.maxRain }} mm</b>（{{ fStats.maxRainYear }}年） · 最高温极值: <b>{{ fStats.peakTmax }}℃</b>（{{ fStats.peakTmaxYear }}年）
+              </div>
+            </template>
+            <el-table :data="visibleRows" border stripe  :row-class-name="rowClassName" :default-sort="{ prop: 'year', order: 'descending' }" :cell-style="{ padding: '10px 0' }">
+              <el-table-column prop="year" label="年份" align="center" min-width="80" sortable>
+                <template #default="{ row }"
+                  ><span class="cell-year">{{ row.year }}</span></template
+                >
+              </el-table-column>
+              <el-table-column label="当天日期" align="center" min-width="110">
+                <template #default="{ row }"
+                  ><span class="cell-date">{{ row.year }}-{{ padNum(anchorMonth) }}-{{ padDay }}</span></template
+                >
+              </el-table-column>
+              <el-table-column prop="rainfall" label="降雨量(mm)" align="center" min-width="110" sortable>
+                <template #default="{ row }">
+                  <span :class="[rainValClass(row.rainfall), { extreme_cell: row._isMaxRain }]">
+                    {{ row.rainfall }}
+                    <span v-if="row._isMaxRain" class="extreme-badge rain-badge">MAX</span>
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column label="雨量等级" align="center" min-width="80">
+                <template #default="{ row }">
+                  <span>{{ rainLevelLabel(row.rainfall) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="tmax" label="最高温度(℃)" align="center" min-width="100" sortable>
+                <template #default="{ row }">
+                  <span :class="[tmaxValClass(row.tmax), { extreme_cell: row._isMaxTmax }]">
+                    {{ row.tmax }}
+                    <span v-if="row._isMaxTmax" class="extreme-badge hot-badge">MAX</span>
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="tavg" label="平均温度(℃)" align="center" min-width="100" sortable />
+              <el-table-column prop="tmin" label="最低温度(℃)" align="center" min-width="100" sortable>
+                <template #default="{ row }">
+                  <span :class="[tminValClass(row.tmin), { extreme_cell: row._isMinTmin }]">
+                    {{ row.tmin }}
+                    <span v-if="row._isMinTmin" class="extreme-badge cold-badge">MIN</span>
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="windSpeed" label="平均风速(m/s)" align="center" min-width="110" sortable />
+              <el-table-column label="平均风向" align="center" min-width="90">
+                <template #default="{ row }">{{ windDirectionLabel(row.windDirection) }}</template>
+              </el-table-column>
+              <el-table-column v-if="hasActiveFilter" label="匹配" align="center" min-width="65">
+                <template #default="{ row }"
+                  ><el-tag :type="row._matched ? 'success' : 'info'" size="small" effect="dark">{{ row._matched ? "✓" : "—" }}</el-tag></template
+                >
+              </el-table-column>
+            </el-table>
+            <div v-if="!tableExpanded && displayRows.length > previewCount" class="table-fade-hint">
+              <el-button type="primary" link @click="tableExpanded = true"
+                >还有 {{ displayRows.length - previewCount }} 条，点击展开全部 <el-icon><ArrowDown /></el-icon
+              ></el-button>
+            </div>
+          </el-card>
+        </div>
+        <div class="col-side">
+          <el-card class="mod-card summary-card" shadow="never">
+            <template #header
+              ><span
+                ><el-icon><Document /></el-icon> 摘要总结</span
+              ></template
+            >
+            <div class="summary-text">{{ pageState.summary }}</div>
+            <div v-if="hasActiveFilter && filteredRows.length > 0" class="filter-summary-box">
+              <p>{{ filterSummaryText }}</p>
+            </div>
+            <div v-else-if="hasActiveFilter" class="filter-summary-box">
+              <p>筛选条件无匹配年份，请调整筛选范围</p>
+            </div>
+          </el-card>
+          <el-card class="mod-card rain-prob-card" shadow="never">
+            <template #header>
+              <span><el-icon><DataAnalysis /></el-icon> 雨量等级概率</span>
+            </template>
+            <div class="rp-body">
+              <div class="rp-row" v-for="item in rainLevelDistribution" :key="item.label">
+                <span class="rp-label">{{ item.label }}</span>
+                <div class="rp-bar-track">
+                  <div class="rp-bar-fill" :style="{ width: item.pct + '%' }"></div>
+                </div>
+                <span class="rp-pct">{{ item.pct }}%</span>
+                <span class="rp-count">({{ item.count }})</span>
+              </div>
+            </div>
+          </el-card>
+          <el-card class="mod-card disaster-card" shadow="never">
+            <template #header>
+              <div class="card-hd">
+                <span class="card-hd-title"
+                  ><el-icon><WarningFilled /></el-icon> 灾情回溯</span
+                >
+              </div>
+            </template>
+            <el-empty description="暂无灾情记录（灾情模块建设中）" :image-size="60" />
+          </el-card>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import {ref, onMounted, computed, watch, nextTick} from "vue";
+import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
 import * as echarts from "echarts";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+import { ElMessage } from "element-plus";
+import baseService from "@/service/baseService";
+import { useAppStore } from "@/store";
+import { Location, Calendar, Filter, Operation, ArrowDown, ArrowUp, InfoFilled, RefreshRight, DataAnalysis, Tickets, DataLine, Document, WarningFilled, Download, OfficeBuilding } from "@element-plus/icons-vue";
 
-// --- 状态逻辑 ---
-const mode = ref('single');
-const isRegionalMode = computed(() => mode.value === 'regional');
-const backwardYears = ref(30);
-const selectedStation = ref(1); // 默认选中站点ID为1
+// =============================================================================
+//  Constants & Date
+// =============================================================================
 const currentYear = new Date().getFullYear();
-const startYear = computed(() => currentYear - backwardYears.value);
-const isTableExpanded = ref(false);
+const now = new Date();
+const appRoot = ref(null);
+const loading = ref(false);
 
-const mainChartRef = ref(null);
-let chartInstance = null;
-const tableData = ref([]);
-const disasterData = ref([]);
-const summaryText = ref("");
+const anchorMonth = ref(now.getMonth() + 1);
+const anchorDay = ref(now.getDate());
+const padDay = computed(() => String(anchorDay.value).padStart(2, "0"));
+const padNum = (n) => String(n).padStart(2, "0");
 
-const handleYearChange = (val) => {
-  // 1. 将输入值转为整数
-  let num = parseInt(val);
+// =============================================================================
+//  Station — 动态获取区站列表
+// =============================================================================
+const stations = ref([]);
+const selectedStation = ref("");
 
-  // 2. 容错校验：非数字或负数设为默认值 10，最大限制 100
-  if (isNaN(num) || num <= 0) {
-    backwardYears.value = 10;
-  } else {
-    backwardYears.value = num > 100 ? 100 : num;
+const currentStationName = computed(() => stations.value.find((s) => s.stationCode === selectedStation.value)?.stationName || "未知");
+const currentAreaLabel = computed(() => "" + currentStationName.value);
+
+function selectStation(code) {
+  if (loading.value) return;
+  selectedStation.value = code;
+  refreshAll();
+}
+
+async function fetchStations() {
+  try {
+    const res = await baseService.get("/station/weatherstation/list");
+    if (res.code === 0 && res.data) {
+      stations.value = res.data;
+      if (stations.value.length > 0 && !selectedStation.value) {
+        selectedStation.value = stations.value[0].stationCode;
+      }
+    }
+  } catch (err) {
+    console.error("获取区站列表失败:", err);
   }
+}
 
-  // 3. 触发数据刷新
-  refreshData();
-};
+// =============================================================================
+//  Year Span
+// =============================================================================
+const yearPresets = [10, 20, 30, 50, 60];
+const yearSpan = ref(30);
+const yearSpanInput = ref(30);
+const computedEndYear = computed(() => currentYear);
+const computedStartYear = computed(() => currentYear - yearSpan.value + 1);
+const computedSpan = computed(() => yearSpan.value);
 
-const currentStationName = computed(() => {
-  const s = stations.find(item => item.id === selectedStation.value);
-  return s ? s.name : '未知站点';
+function setYearSpan(y) {
+  if (loading.value) return;
+  yearSpan.value = y;
+  yearSpanInput.value = y;
+  refreshAll();
+}
+
+function applyManualSpan() {
+  const v = Math.max(1, Math.min(100, yearSpanInput.value || 30));
+  yearSpan.value = v;
+  yearSpanInput.value = v;
+  refreshAll();
+}
+
+// =============================================================================
+//  Page State
+// =============================================================================
+const emptyStats = () => ({
+  avgTmax: "-",
+  avgTmaxYear: "-",
+  avgTmin: "-",
+  avgTminYear: "-",
+  avgRain: "-",
+  maxRain: "-",
+  maxRainYear: "-",
+  rainyCount: 0,
+  rainyPct: "0",
+  maxTmax: "-",
+  maxTmaxYear: "-",
+  minTmin: "-",
+  minTminYear: "-"
 });
 
-const stations = [
-  {id: 1, name: "安仁"}, {id: 2, name: "资兴"},
-  {id: 3, name: "桂阳"}, {id: 4, name: "宜章"},
-  {id: 5, name: "北湖"}, {id: 6, name: "苏仙"}
+const pageState = reactive({
+  weatherData: [],
+  stats: emptyStats(),
+  summary: "",
+  statCards: [],
+  disasters: []
+});
+
+// =============================================================================
+//  Wind direction conversion
+// =============================================================================
+const _store = useAppStore();
+function _windDirectionCode(deg) {
+  if (deg == null || deg === "" || isNaN(deg)) return null;
+  const d = Number(deg);
+  if (d < 0 || d > 360) return null;
+  return ["N", "NE", "E", "SE", "S", "SW", "W", "NW"][Math.floor((d + 22.5) / 45) % 8];
+}
+function windDirectionLabel(deg) {
+  const code = _windDirectionCode(deg);
+  if (!code) return "—";
+  const type = _store.state.dicts.find((d) => d.dictType === "wind_direction_type");
+  const entry = type?.dataList?.find((e) => e.dictValue === code);
+  return entry?.dictLabel || code;
+}
+
+// =============================================================================
+//  Rain & Temperature helpers
+// =============================================================================
+function rainLevelLabel(v) {
+  v = +v;
+  if (v < 0.1) return "无雨";
+  if (v < 10) return "小雨";
+  if (v < 25) return "中雨";
+  if (v < 50) return "大雨";
+  if (v < 100) return "暴雨";
+  if (v < 250) return "大暴雨";
+  return "特大暴雨";
+}
+
+function rainValClass(v) {
+  v = +v;
+  if (v >= 100) return "val-extreme";
+  if (v >= 50) return "val-danger";
+  if (v >= 25) return "val-warn";
+  return "";
+}
+
+function tmaxValClass(v) {
+  v = +v;
+  if (v >= 38) return "val-extreme";
+  if (v >= 35) return "val-danger";
+  if (v >= 30) return "val-warn";
+  return "";
+}
+
+function tminValClass(v) {
+  v = +v;
+  if (v <= 0) return "val-cold-x";
+  if (v <= 5) return "val-cold";
+  return "";
+}
+
+// =============================================================================
+//  Filter
+// =============================================================================
+const filterOpen = ref(false);
+const showOnlyFiltered = ref(false);
+const tableExpanded = ref(false);
+const previewCount = 8;
+
+const rainLevelDefs = [
+  { label: "小雨", min: 0.1, max: 10 },
+  { label: "中雨", min: 10, max: 25 },
+  { label: "大雨", min: 25, max: 50 },
+  { label: "暴雨", min: 50, max: 100 },
+  { label: "大暴雨", min: 100, max: 250 },
+  { label: "特大暴雨", min: 250, max: 9999 }
 ];
 
-const today = computed(() => {
-  const d = new Date();
-  return {month: d.getMonth() + 1, day: d.getDate()};
+const tempFilterFields = [
+  { key: "tmaxF", label: "最高气温", range: true },
+  { key: "tminF", label: "最低气温", range: true },
+  { key: "tavgF", label: "平均气温", range: false }
+];
+
+const defaultFilters = () => ({
+  rainfall: { op: "", val: 25, min: 0, max: 999 },
+  rainLevel: [],
+  tmaxF: { op: "", val: 35, min: 25, max: 40 },
+  tminF: { op: "", val: 5, min: 0, max: 15 },
+  tavgF: { op: "", val: 20 },
+  yearRange: [currentYear - 29, currentYear],
+  decades: []
 });
+const filters = ref(defaultFilters());
 
-const displayTableData = computed(() => isTableExpanded.value ? tableData.value : tableData.value.slice(0, 6));
-
-const currentAreaLabel = computed(() => {
-  if (isRegionalMode.value) return "郴州市";
-  const s = stations.find(item => item.id === selectedStation.value);
-  return s ? s.name + '站' : '';
-});
-
-const chartTitle = computed(() => isRegionalMode.value ? "全市各站点实况对比" : `${currentAreaLabel.value}·历年今日演变趋势`);
-
-const getTagColor = (t) => ({
-  "暴雨": "#409EFF",
-  "雷电": "#E6A23C",
-  "高温": "#F56C6C",
-  "大风": "#67C23A"
-}[t] || "#909399");
-
-// --- 核心业务逻辑 ---
-function refreshData() {
-  const mockTable = [];
-  if (isRegionalMode.value) {
-    stations.forEach(s => {
-      mockTable.push({
-        stationName: s.name,
-        fullDate: `${currentYear}-${String(today.value.month).padStart(2, '0')}-${String(today.value.day).padStart(2, '0')}`,
-        rainfall: (Math.random() * 45).toFixed(1),
-        tmax: (26 + Math.random() * 6).toFixed(1),
-        tavg: (21 + Math.random() * 4).toFixed(1),
-        tmin: (18 + Math.random() * 3).toFixed(1)
-      });
-    });
+function toggleRainLevel(lv) {
+  const idx = filters.value.rainLevel.indexOf(lv.label);
+  if (idx >= 0) {
+    filters.value.rainLevel.splice(idx, 1);
   } else {
-    for (let i = 0; i < backwardYears.value; i++) {
-      const year = currentYear - i;
-      mockTable.push({
-        year,
-        fullDate: `${year}-${String(today.value.month).padStart(2, '0')}-${String(today.value.day).padStart(2, '0')}`,
-        rainfall: (Math.random() * 70).toFixed(1),
-        tmax: (22 + Math.random() * 12).toFixed(1),
-        tavg: (18 + Math.random() * 6).toFixed(1),
-        tmin: (14 + Math.random() * 5).toFixed(1)
-      });
+    filters.value.rainLevel.push(lv.label);
+  }
+  syncRainfallFromLevels();
+}
+function syncRainfallFromLevels() {
+  const labels = filters.value.rainLevel;
+  if (labels.length === 0) {
+    filters.value.rainfall.op = "";
+    return;
+  }
+  let gmin = Infinity, gmax = -Infinity;
+  for (const def of rainLevelDefs) {
+    if (labels.includes(def.label)) {
+      if (def.min < gmin) gmin = def.min;
+      if (def.max > gmax) gmax = def.max;
     }
   }
-  tableData.value = mockTable;
-
-  disasterData.value = [
-    {year: 2023, tags: ["暴雨", "雷电"], area: "安仁、资兴", loss: 520},
-    {year: 2018, tags: ["大风"], area: "桂阳", loss: 80},
-    {year: 2018, tags: ["大风", "暴雨", "城市内涝", "山洪", "泥石流",], area: "桂阳", loss: 80}
-  ].filter(d => d.year >= startYear.value);
-
-  summaryText.value = `${currentAreaLabel.value}在过去${backwardYears.value}年中，今日气候波动${tableData.value[0].rainfall > 40 ? '显著' : '平稳'}。`;
-  nextTick(() => renderChart());
+  filters.value.rainfall = { op: "range", min: gmin, max: gmax, val: gmax };
 }
 
-function renderChart() {
-  if (!chartInstance) chartInstance = echarts.init(mainChartRef.value);
-  const xAxisData = isRegionalMode.value
-    ? tableData.value.map(d => d.stationName)
-    : tableData.value.map(d => d.year).reverse();
+const availableDecades = computed(() => {
+  const s = new Set();
+  for (let y = computedStartYear.value; y <= computedEndYear.value; y++) s.add(Math.floor(y / 10) * 10);
+  return Array.from(s).sort();
+});
 
-  chartInstance.setOption({
-    tooltip: {trigger: 'axis'},
-    legend: {bottom: 0},
-    grid: {top: '15%', bottom: '15%', left: '5%', right: '5%'},
-    xAxis: {type: 'category', data: xAxisData},
-    yAxis: [{type: 'value', name: '降雨(mm)'}, {type: 'value', name: '气温(℃)', position: 'right', scale: true}],
-    series: [
-      {
-        name: '降雨量', type: 'bar', barWidth: 20,
-        data: isRegionalMode.value ? tableData.value.map(d => d.rainfall) : tableData.value.map(d => d.rainfall).reverse(),
-        itemStyle: {color: '#409EFF'},
-        label: {show: true, position: 'top', fontSize: 10}
-      },
-      {
-        name: '最高气温', type: 'line', yAxisIndex: 1, smooth: true,
-        data: isRegionalMode.value ? tableData.value.map(d => d.tmax) : tableData.value.map(d => d.tmax).reverse(),
-        itemStyle: {color: '#F56C6C'},
-        label: {show: true, position: 'top'}
+function toggleDecade(d) {
+  const i = filters.value.decades.indexOf(d);
+  if (i >= 0) {
+    filters.value.decades.splice(i, 1);
+  } else {
+    filters.value.decades.push(d);
+  }
+}
+
+function matchOp(val, cfg) {
+  if (!cfg || !cfg.op) return true;
+  const n = +val;
+  if (cfg.op === "gte") return n >= cfg.val;
+  if (cfg.op === "lte") return n <= cfg.val;
+  if (cfg.op === "range") return n >= (cfg.min ?? -Infinity) && n <= (cfg.max ?? Infinity);
+  return true;
+}
+
+const FILTER_KEYS = ["rainfall", "tmaxF", "tminF", "tavgF"];
+const hasActiveFilter = computed(() => {
+  const f = filters.value;
+  return FILTER_KEYS.some((k) => f[k]?.op) || f.rainLevel.length > 0 || f.decades.length > 0 || f.yearRange[0] !== computedStartYear.value || f.yearRange[1] !== computedEndYear.value;
+});
+
+const activeFilterCount = computed(() => {
+  const f = filters.value;
+  let c = FILTER_KEYS.filter((k) => f[k]?.op).length;
+  if (f.rainLevel.length) c++;
+  if (f.decades.length) c++;
+  if (f.yearRange[0] !== computedStartYear.value || f.yearRange[1] !== computedEndYear.value) c++;
+  return c;
+});
+
+function resetFilters() {
+  filters.value = defaultFilters();
+  filters.value.yearRange = [computedStartYear.value, computedEndYear.value];
+  showOnlyFiltered.value = false;
+}
+
+// =============================================================================
+//  Filtered / Marked rows
+// =============================================================================
+const filterExtremes = computed(() => {
+  if (!hasActiveFilter.value) return null;
+  const d = filteredRows.value;
+  if (!d.length) return null;
+  const result = d.reduce(
+    (acc, row) => ({
+      maxRain: !acc.maxRain || row.rainfall > acc.maxRain.rainfall ? row : acc.maxRain,
+      maxTmax: !acc.maxTmax || row.tmax > acc.maxTmax.tmax ? row : acc.maxTmax,
+      minTmin: !acc.minTmin || row.tmin < acc.minTmin.tmin ? row : acc.minTmin,
+      maxTavg: !acc.maxTavg || row.tavg > acc.maxTavg.tavg ? row : acc.maxTavg
+    }),
+    { maxRain: null, maxTmax: null, minTmin: null, maxTavg: null }
+  );
+  return {
+    maxRainYear: result.maxRain.year,
+    maxRain: result.maxRain.rainfall,
+    maxTmaxYear: result.maxTmax.year,
+    maxTmax: result.maxTmax.tmax,
+    minTminYear: result.minTmin.year,
+    minTmin: result.minTmin.tmin,
+    maxTavgYear: result.maxTavg?.year,
+    maxTavg: result.maxTavg?.tavg
+  };
+});
+
+const markedRows = computed(() => {
+  const ex = filterExtremes.value;
+  return pageState.weatherData.map((row) => {
+    let ok = true;
+    if (hasActiveFilter.value) {
+      const f = filters.value;
+      if (!matchOp(row.rainfall, f.rainfall)) ok = false;
+      if (!matchOp(row.tmax, f.tmaxF)) ok = false;
+      if (!matchOp(row.tmin, f.tminF)) ok = false;
+      if (!matchOp(row.tavg, f.tavgF)) ok = false;
+      if (row.year < f.yearRange[0] || row.year > f.yearRange[1]) ok = false;
+      if (f.decades.length > 0 && !f.decades.includes(Math.floor(row.year / 10) * 10)) ok = false;
+      if (f.rainLevel.length > 0 && !f.rainLevel.includes(rainLevelLabel(row.rainfall))) ok = false;
+    }
+    return {
+      ...row,
+      _matched: hasActiveFilter.value ? ok : true,
+      _isMaxRain: ex && ok && row.year === ex.maxRainYear,
+      _isMaxTmax: ex && ok && row.year === ex.maxTmaxYear,
+      _isMinTmin: ex && ok && row.year === ex.minTminYear
+    };
+  });
+});
+
+const filteredRows = computed(() => markedRows.value.filter((r) => r._matched));
+const displayRows = computed(() => (showOnlyFiltered.value && hasActiveFilter.value ? filteredRows.value : markedRows.value));
+const visibleRows = computed(() => (tableExpanded.value ? displayRows.value : displayRows.value.slice(0, previewCount)));
+
+const fStats = computed(() => {
+  const d = filteredRows.value;
+  if (!d.length) return {};
+  const result = d.reduce(
+    (acc, row) => ({
+      sumRain: acc.sumRain + row.rainfall,
+      sumTmax: acc.sumTmax + row.tmax,
+      count: acc.count + 1,
+      maxRain:
+        row.rainfall > (acc.maxRain?.rainfall ?? -Infinity)
+          ? { rainfall: row.rainfall, year: row.year }
+          : acc.maxRain,
+      maxTmax:
+        row.tmax > (acc.maxTmax?.tmax ?? -Infinity)
+          ? { tmax: row.tmax, year: row.year }
+          : acc.maxTmax
+    }),
+    { sumRain: 0, sumTmax: 0, count: 0, maxRain: null, maxTmax: null }
+  );
+  return {
+    avgRain: (result.sumRain / result.count).toFixed(1),
+    avgTmax: (result.sumTmax / result.count).toFixed(1),
+    maxRain: result.maxRain?.rainfall,
+    maxRainYear: result.maxRain?.year,
+    peakTmax: result.maxTmax?.tmax,
+    peakTmaxYear: result.maxTmax?.year
+  };
+});
+
+const rainLevelDistribution = computed(() => {
+  const data = displayRows.value;
+  const total = data.length;
+  if (!total) return [];
+  const levels = [
+    { label: "无雨", min: -Infinity, max: 0.1 },
+    ...rainLevelDefs
+  ];
+  const counts = new Array(levels.length).fill(0);
+  data.forEach((r) => {
+    const v = +r.rainfall;
+    for (let i = 0; i < levels.length; i++) {
+      if (v >= levels[i].min && v < levels[i].max) {
+        counts[i]++;
+        break;
       }
-    ]
-  }, true);
+    }
+  });
+  return levels.map((l, i) => ({
+    label: l.label,
+    count: counts[i],
+    pct: ((counts[i] / total) * 100).toFixed(1)
+  }));
+});
+
+const filterSummaryText = computed(() => {
+  if (!filteredRows.value.length) return "";
+  const s = fStats.value;
+  return `筛选命中 ${filteredRows.value.length} 个年份，平均降雨 ${s.avgRain}mm，平均最高温 ${s.avgTmax}℃。最大降雨 ${s.maxRainYear} 年（${s.maxRain}mm），最高温极值 ${s.peakTmaxYear} 年（${s.peakTmax}℃）。`;
+});
+
+function rowClassName({ row }) {
+  const classes = [];
+  if (hasActiveFilter.value) classes.push(row._matched ? "row-hit" : "row-dim");
+  if (row._isMaxRain || row._isMaxTmax || row._isMinTmin) classes.push("row-extreme");
+  return classes.join(" ");
 }
 
-const handleModeChange = () => {
-  isTableExpanded.value = false;
-  refreshData();
-};
+// =============================================================================
+//  Stat cards
+// =============================================================================
+const statCards = computed(() => pageState.statCards);
 
-import html2canvas from 'html2canvas';
-import jsPDF from 'jspdf';
+// =============================================================================
+//  Chart
+// =============================================================================
+const chartRef = ref(null);
+let chartInst = null;
+let chartResizeObserver = null;
 
-const exportRef = ref(null); // 在 template 最外层 div 绑定 ref="exportRef"
+function buildChartOption(allData, matchedYears, extremes, hasFilter, month, day) {
+  const src = allData;
+  const xData = src.map((d) => d.year);
+  const isHit = (d) => !hasFilter || matchedYears.has(d.year);
+  const gradHit = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: "#60a5fa" },
+    { offset: 1, color: "#2563eb" }
+  ]);
 
-const handleExport = async (type = 'png') => {
-  const element = document.querySelector('.container'); // 或者使用 ref
-  const canvas = await html2canvas(element, {
-    useCORS: true, // 允许跨域图片
-    scale: 2,      // 提高清晰度
-    backgroundColor: '#f4f7f9' // 保持背景色
+  const markPoints = [];
+  if (hasFilter && extremes) {
+    const idx = src.findIndex((d) => d.year === extremes.maxRainYear);
+    if (idx >= 0)
+      markPoints.push({
+        name: "最大降雨",
+        coord: [idx, extremes.maxRain],
+        value: `${extremes.maxRain}mm`,
+        symbol: "circle",
+        symbolSize: 8,
+        itemStyle: { color: "#7c3aed" },
+        label: {
+          position: "top",
+          offset: [0, -10],
+          color: "#fff",
+          fontSize: 12,
+          fontWeight: 700,
+          backgroundColor: "#7c3aed",
+          padding: [4, 10],
+          borderRadius: 4
+        }
+      });
+  }
+
+  const markPointsTmax = [];
+  const markPointsTmin = [];
+  const markPointsTavg = [];
+  if (hasFilter && extremes) {
+    const tmaxIdx = src.findIndex((d) => d.year === extremes.maxTmaxYear);
+    if (tmaxIdx >= 0)
+      markPointsTmax.push({
+        name: "最高温",
+        coord: [tmaxIdx, extremes.maxTmax],
+        value: `${extremes.maxTmax}℃`,
+        symbol: "circle",
+        symbolSize: 8,
+        itemStyle: { color: "#dc2626" },
+        label: {
+          position: "top",
+          offset: [0, -10],
+          color: "#fff",
+          fontSize: 12,
+          fontWeight: 700,
+          backgroundColor: "#dc2626",
+          padding: [4, 10],
+          borderRadius: 4
+        }
+      });
+    const tminIdx = src.findIndex((d) => d.year === extremes.minTminYear);
+    if (tminIdx >= 0)
+      markPointsTmin.push({
+        name: "最低温",
+        coord: [tminIdx, extremes.minTmin],
+        value: `${extremes.minTmin}℃`,
+        symbol: "circle",
+        symbolSize: 8,
+        itemStyle: { color: "#1d4ed8" },
+        label: {
+          position: "bottom",
+          offset: [0, 10],
+          color: "#fff",
+          fontSize: 12,
+          fontWeight: 700,
+          backgroundColor: "#1d4ed8",
+          padding: [4, 10],
+          borderRadius: 4
+        }
+      });
+    const tavgIdx = src.findIndex((d) => d.year === extremes.maxTavgYear);
+    if (tavgIdx >= 0 && extremes.maxTavg != null)
+      markPointsTavg.push({
+        name: "最高平均温",
+        coord: [tavgIdx, extremes.maxTavg],
+        value: `${extremes.maxTavg}℃`,
+        symbol: "circle",
+        symbolSize: 8,
+        itemStyle: { color: "#f59e0b" },
+        label: {
+          position: "top",
+          offset: [0, -10],
+          color: "#fff",
+          fontSize: 12,
+          fontWeight: 700,
+          backgroundColor: "#f59e0b",
+          padding: [4, 10],
+          borderRadius: 4
+        }
+      });
+  }
+
+  const markLines = [];
+  if (hasFilter) {
+    src.forEach((_d, i) => {
+      if (matchedYears.has(src[i].year))
+        markLines.push([
+          { xAxis: i, yAxis: 0, symbol: "none" },
+          {
+            xAxis: i,
+            yAxis: "max",
+            symbol: "none",
+            lineStyle: { color: "rgba(16,185,129,0.22)", width: 2, type: "dashed" },
+            label: { show: false }
+          }
+        ]);
+    });
+  }
+
+  const rainData = src.map((d, i) => {
+    return {
+      value: d.rainfall,
+      itemStyle: {
+        color: isHit(d) ? gradHit : "rgba(148,163,184,0.18)",
+        borderRadius: [3, 3, 0, 0]
+      }
+    };
   });
 
-  if (type === 'png') {
-    // 导出图片
-    const link = document.createElement('a');
-    link.href = canvas.toDataURL('image/png');
-    link.download = `气象回溯_${today.value.month}月${today.value.day}日.png`;
-    link.click();
-  } else {
-    // 导出 PDF
-    const imgData = canvas.toDataURL('image/png');
-    const pdf = new jsPDF('p', 'mm', 'a4');
-    const imgProps = pdf.getImageProperties(imgData);
-    const pdfWidth = pdf.internal.pageSize.getWidth();
-    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
+  const tmaxData = src.map((d) => {
+    return {
+      value: d.tmax,
+      symbolSize: isHit(d) ? 6 : 2,
+      itemStyle: { color: isHit(d) ? "#ef4444" : "rgba(239,68,68,0.12)" }
+    };
+  });
 
-    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
-    pdf.save(`气象回溯_${today.value.month}月${today.value.day}日.pdf`);
+  const tminData = src.map((d) => {
+    return {
+      value: d.tmin,
+      symbolSize: isHit(d) ? 5 : 2,
+      itemStyle: { color: isHit(d) ? "#3b82f6" : "rgba(59,130,246,0.12)" }
+    };
+  });
+
+  const tavgData = src.map((d) => {
+    return {
+      value: d.tavg,
+      symbolSize: isHit(d) ? 5 : 2,
+      itemStyle: { color: isHit(d) ? "#f59e0b" : "rgba(245,158,11,0.15)" }
+    };
+  });
+
+  const dateLabel = `${month}月${String(day).padStart(2, "0")}日`;
+
+  return {
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(255,255,255,.96)",
+      borderColor: "#e2e8f0",
+      textStyle: { fontSize: 13 },
+      formatter(ps) {
+        const yr = ps[0]?.axisValue;
+        const hit = !hasFilter || matchedYears.has(yr);
+        const isExtreme = extremes && (yr === extremes.maxRainYear || yr === extremes.maxTmaxYear || yr === extremes.minTminYear || yr === extremes.maxTavgYear);
+        let h = `<div style="font-weight:700;margin-bottom:4px">${yr}年 ${dateLabel}`;
+        if (hit && hasFilter) h += " ✅";
+        if (isExtreme) h += ' <span style="color:#7c3aed;font-size:11px">⭐极值年份</span>';
+        h += "</div>";
+        ps.forEach((p) => {
+          h += `${p.marker} ${p.seriesName}: <b>${p.value}</b><br/>`;
+        });
+        return h;
+      }
+    },
+    legend: { bottom: 0, textStyle: { fontSize: 12 } },
+    grid: { top: "12%", bottom: "14%", left: "6%", right: "6%" },
+    xAxis: {
+      type: "category",
+      data: xData,
+      axisLabel: { rotate: xData.length > 25 ? 45 : 0, fontSize: 11 }
+    },
+    yAxis: [
+      {
+        type: "value",
+        name: "降雨(mm)",
+        nameTextStyle: { color: "#2563eb", fontWeight: 600 },
+        splitLine: { lineStyle: { type: "dashed", color: "#f1f5f9" } }
+      },
+      {
+        type: "value",
+        name: "气温(℃)",
+        position: "right",
+        scale: true,
+        nameTextStyle: { color: "#ef4444", fontWeight: 600 },
+        splitLine: { show: false }
+      }
+    ],
+    series: [
+      {
+        name: "降雨量",
+        type: "bar",
+        barMaxWidth: 20,
+        data: rainData,
+        markLine: { silent: true, symbol: ["none", "none"], data: markLines },
+        markPoint: { data: markPoints }
+      },
+      {
+        name: "最高气温",
+        type: "line",
+        yAxisIndex: 1,
+        smooth: true,
+        symbolSize: 0,
+        lineStyle: { width: 2.5, color: "#ef4444" },
+        data: tmaxData,
+        markPoint: { data: markPointsTmax }
+      },
+      {
+        name: "最低气温",
+        type: "line",
+        yAxisIndex: 1,
+        smooth: true,
+        symbolSize: 0,
+        lineStyle: { width: 2, color: "#3b82f6", type: "dashed" },
+        data: tminData,
+        markPoint: { data: markPointsTmin }
+      },
+      {
+        name: "平均气温",
+        type: "line",
+        yAxisIndex: 1,
+        smooth: true,
+        symbolSize: 0,
+        lineStyle: { width: 2, color: "#f59e0b" },
+        data: tavgData,
+        markPoint: { data: markPointsTavg }
+      }
+    ]
+  };
+}
+
+const chartOptions = computed(() => {
+  let src = [...pageState.weatherData].reverse();
+  const matchSet = new Set(filteredRows.value.map((r) => r.year));
+
+  if (showOnlyFiltered.value && hasActiveFilter.value) {
+    src = src.filter((d) => matchSet.has(d.year));
   }
-};
 
-onMounted(() => {
-  refreshData();
-  window.addEventListener('resize', () => chartInstance?.resize());
+  const effectiveMatchSet = showOnlyFiltered.value && hasActiveFilter.value ? new Set(src.map((d) => d.year)) : matchSet;
+
+  return buildChartOption(src, effectiveMatchSet, filterExtremes.value, hasActiveFilter.value, anchorMonth.value, anchorDay.value);
+});
+
+function renderChart() {
+  if (!chartRef.value) return;
+  if (chartInst) {
+    chartInst.setOption(chartOptions.value, true);
+  } else {
+    chartInst = echarts.init(chartRef.value);
+    chartInst.setOption(chartOptions.value, true);
+    // 使用 ResizeObserver 监听容器尺寸变化（比 window.resize 更可靠）
+    chartResizeObserver = new ResizeObserver(() => {
+      chartInst?.resize();
+    });
+    chartResizeObserver.observe(chartRef.value);
+  }
+}
+
+function destroyChart() {
+  chartResizeObserver?.disconnect();
+  chartResizeObserver = null;
+  chartInst?.dispose();
+  chartInst = null;
+}
+
+// =============================================================================
+//  Export
+// =============================================================================
+async function doExport(type) {
+  const el = appRoot.value;
+  if (!el) return;
+  const prevTableExp = tableExpanded.value;
+  const prevFilterOpen = filterOpen.value;
+  tableExpanded.value = true;
+  filterOpen.value = false;
+  await nextTick();
+  await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+  const canvas = await html2canvas(el, {
+    useCORS: true,
+    scale: 2,
+    backgroundColor: "#f1f5f9",
+    logging: false,
+    allowTaint: true,
+    ignoreElements: (e) => {
+      if (e.classList?.contains("el-popper") || e.classList?.contains("el-popover")) return true;
+      if (e.tagName === "STYLE" && e.textContent?.includes("v-popper")) return true;
+      return false;
+    },
+    onclone: (clonedDoc) => {
+      clonedDoc.querySelectorAll(".el-icon").forEach((icon) => {
+        if (!icon.querySelector("svg")) return;
+        icon.style.display = "inline-block";
+        icon.style.width = "14px";
+        icon.style.height = "14px";
+      });
+      const charts = clonedDoc.querySelectorAll("canvas");
+      charts.forEach((c) => {
+        c.style.display = "block";
+      });
+      clonedDoc.querySelectorAll(".el-table__body-wrapper").forEach((w) => {
+        w.style.overflow = "visible";
+      });
+    }
+  });
+  tableExpanded.value = prevTableExp;
+  filterOpen.value = prevFilterOpen;
+  const dateStr = `${anchorMonth.value}月${padDay.value}日`;
+  if (type === "png") {
+    const a = document.createElement("a");
+    a.href = canvas.toDataURL("image/png");
+    a.download = `气象回溯_${dateStr}.png`;
+    a.click();
+  } else {
+    const imgData = canvas.toDataURL("image/png");
+    const pdf = new jsPDF("p", "mm", "a4");
+    const w = pdf.internal.pageSize.getWidth();
+    const h = (canvas.height * w) / canvas.width;
+    const pageH = pdf.internal.pageSize.getHeight();
+    if (h <= pageH) {
+      pdf.addImage(imgData, "PNG", 0, 0, w, h);
+    } else {
+      let remaining = h;
+      let yOffset = 0;
+      while (remaining > 0) {
+        if (yOffset > 0) pdf.addPage();
+        pdf.addImage(imgData, "PNG", 0, -yOffset, w, h);
+        yOffset += pageH;
+        remaining -= pageH;
+      }
+    }
+    pdf.save(`气象回溯_${dateStr}.pdf`);
+  }
+}
+
+// =============================================================================
+//  Data Processing — compute stats from weather data
+// =============================================================================
+function computeStats(data) {
+  if (!data.length) return emptyStats();
+  const result = data.reduce(
+    (acc, row) => ({
+      sumTmax: acc.sumTmax + row.tmax,
+      sumTmin: acc.sumTmin + row.tmin,
+      sumRain: acc.sumRain + row.rainfall,
+      count: acc.count + 1,
+      rainyCount: acc.rainyCount + (row.rainfall > 0.1 ? 1 : 0),
+      maxRainRow: !acc.maxRainRow || row.rainfall > acc.maxRainRow.rainfall ? row : acc.maxRainRow,
+      maxTmaxRow: !acc.maxTmaxRow || row.tmax > acc.maxTmaxRow.tmax ? row : acc.maxTmaxRow,
+      minTminRow: !acc.minTminRow || row.tmin < acc.minTminRow.tmin ? row : acc.minTminRow,
+      maxTavgRow: !acc.maxTavgRow || row.tavg > acc.maxTavgRow.tavg ? row : acc.maxTavgRow,
+      maxAvgTmaxRow: !acc.maxAvgTmaxRow || row.tmax > acc.maxAvgTmaxRow.tmax ? row : acc.maxAvgTmaxRow,
+      minAvgTminRow: !acc.minAvgTminRow || row.tmin < acc.minAvgTminRow.tmin ? row : acc.minAvgTminRow
+    }),
+    {
+      sumTmax: 0, sumTmin: 0, sumRain: 0, count: 0, rainyCount: 0,
+      maxRainRow: null, maxTmaxRow: null, minTminRow: null, maxTavgRow: null,
+      maxAvgTmaxRow: null, minAvgTminRow: null
+    }
+  );
+  const avg = (sum) => (sum / result.count).toFixed(1);
+  return {
+    avgTmax: avg(result.sumTmax),
+    avgTmaxYear: result.maxAvgTmaxRow?.year,
+    avgTmin: avg(result.sumTmin),
+    avgTminYear: result.minAvgTminRow?.year,
+    avgRain: avg(result.sumRain),
+    maxRain: result.maxRainRow?.rainfall,
+    maxRainYear: result.maxRainRow?.year,
+    rainyCount: result.rainyCount,
+    rainyPct: ((result.rainyCount / result.count) * 100).toFixed(0),
+    maxTmax: result.maxTmaxRow?.tmax,
+    maxTmaxYear: result.maxTmaxRow?.year,
+    minTmin: result.minTminRow?.tmin,
+    minTminYear: result.minTminRow?.year,
+    maxTavg: result.maxTavgRow?.tavg,
+    maxTavgYear: result.maxTavgRow?.year
+  };
+}
+
+function buildStatCards(stats) {
+  return [
+    {
+      items: [
+        { label: "历年最高温度(平均)", value: stats.avgTmax, unit: "℃", color: "#ef4444" },
+        { label: "历年最低温度(平均)", value: stats.avgTmin, unit: "℃", color: "#2563eb" }
+      ]
+    },
+    {
+      items: [
+        { label: "最高温度", value: stats.maxTmax, unit: "℃", color: "#ef4444" },
+        { label: "最高温出现年", value: stats.maxTmaxYear, unit: "年", color: "#4a4645" }
+      ]
+    },
+    {
+      items: [
+        { label: "最低温度", value: stats.minTmin, unit: "℃", color: "#2563eb" },
+        { label: "最低温出现年", value: stats.minTminYear, unit: "年", color: "#4a4645" }
+      ]
+    },
+    {
+      items: [
+        { label: "最高平均温度", value: stats.avgTmax, unit: "℃", color: "#ef4444" },
+        { label: "最高平均温度出现年", value: stats.avgTmaxYear, unit: "年", color: "#4a4645" }
+      ]
+    },
+    {
+      items: [
+        { label: "最低平均温度", value: stats.avgTmin, unit: "℃", color: "#2563eb" },
+        { label: "最低平均温度出现年", value: stats.avgTminYear, unit: "年", color: "#4a4645" }
+      ]
+    },
+    {
+      items: [
+        { label: "最大单日降水", value: stats.maxRain, unit: "mm", color: "#7c3aed" },
+        { label: "最大单日降水出现年", value: stats.maxRainYear, unit: "年", color: "#4a4645" }
+      ]
+    },
+    {
+      items: [
+        { label: "降水量(平均)", value: stats.avgRain, unit: "mm", color: "#0891b2" },
+        { label: "降水概率", value: stats.rainyPct, unit: "%", color: "#059669" }
+      ]
+    }
+  ];
+}
+
+function buildSummary(stats, meta) {
+  const { stationName, fromYear, toYear, month, day, count } = meta;
+  return (
+    `${stationName}在 ${fromYear}~${toYear} 年间，每年${month}月${String(day).padStart(2, "0")}日这一天共回溯 ${count} 条单日记录。` +
+    `其中 ${stats.rainyCount} 年当天出现降水，历史平均单日降雨量 ${stats.avgRain}mm，单日最大降雨 ${stats.maxRain}mm（${stats.maxRainYear}年）。` +
+    `气候整体${+stats.avgRain > 15 ? "偏湿润" : "较干燥"}，需关注${stats.rainyCount / (count || 1) > 0.5 ? "短时强降水" : "高温干旱"}风险。`
+  );
+}
+
+// =============================================================================
+//  API — Real backend integration
+// =============================================================================
+async function refreshAll() {
+  loading.value = true;
+  tableExpanded.value = false;
+
+  try {
+    const m = anchorMonth.value;
+    const d = anchorDay.value;
+    const from = computedStartYear.value;
+    const to = computedEndYear.value;
+
+    const activeStation = stations.value.find((s) => s.stationCode === selectedStation.value);
+    const stationId = activeStation ? activeStation.stationCode : 0;
+
+    const res = await baseService.post("/dailyweather/weatherdailydata/export-sum", {
+      stationIds: [stationId],
+      startDate: `${from}-01-01`,
+      endtDate: `${to}-12-31`
+    });
+
+    if (res.code !== 0) {
+      ElMessage.error(res.msg || "数据加载失败");
+      return;
+    }
+
+    const rawData = res.data || [];
+
+    // Filter to only records matching today's month-day
+    const filtered = rawData.filter((row) => {
+      if (!row.observeDate) return false;
+      const dt = new Date(row.observeDate);
+      if (isNaN(dt.getTime())) return false;
+      return dt.getMonth() + 1 === m && dt.getDate() === d;
+    });
+
+    // Map to internal format, sorted by year descending
+    const mapped = filtered
+      .map((row) => {
+        const dt = new Date(row.observeDate);
+        return {
+          year: dt.getFullYear(),
+          rainfall: row.rain2020 != null ? +row.rain2020 : null,
+          tmax: row.maxTemp != null ? +row.maxTemp : null,
+          tavg: row.avgTemp != null ? +row.avgTemp : null,
+          tmin: row.minTemp != null ? +row.minTemp : null,
+          windSpeed: row.dayAvgWindSpeed != null ? +row.dayAvgWindSpeed : null,
+          windDirection: row.dayAvgWindDirection != null ? +row.dayAvgWindDirection : null,
+          humidity: row.relativeHumidity != null ? +row.relativeHumidity : null,
+          pressure: row.atmospheres != null ? +row.atmospheres : null
+        };
+      })
+      .sort((a, b) => b.year - a.year);
+
+    // Compute stats
+    const stats = computeStats(mapped);
+    const sName = currentStationName.value;
+
+    pageState.weatherData = mapped;
+    pageState.stats = stats;
+    pageState.statCards = buildStatCards(stats);
+    pageState.summary = buildSummary(stats, {
+      stationName: sName,
+      fromYear: from,
+      toYear: to,
+      month: m,
+      day: d,
+      count: mapped.length
+    });
+    pageState.disasters = [];
+
+    // Sync filter year range
+    filters.value.yearRange = [from, to];
+
+    // Render chart
+    await nextTick();
+    renderChart();
+  } catch (err) {
+    console.error("数据获取失败:", err);
+    ElMessage.error("网络请求失败，请检查网络连接");
+  } finally {
+    loading.value = false;
+  }
+}
+
+// =============================================================================
+//  Watchers & Lifecycle
+// =============================================================================
+let renderTimer = null;
+watch([filters, showOnlyFiltered], () => {
+  clearTimeout(renderTimer);
+  renderTimer = setTimeout(() => nextTick(() => renderChart()), 150);
+}, { deep: true });
+
+onMounted(async () => {
+  await fetchStations();
+  if (stations.value.length > 0) {
+    await refreshAll();
+  }
+});
+
+onBeforeUnmount(() => {
+  destroyChart();
 });
 </script>
 
 <style scoped>
-.container {
-  background: #f4f7f9;
-  padding: 20px;
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;600&display=swap");
+.weather-app {
+  --blue: #2563eb;
+  --blue-light: #dbeafe;
+  --red: #ef4444;
+  --green: #10b981;
+  --amber: #f59e0b;
+  --text-1: #0f172a;
+  --text-2: #475569;
+  --text-3: #94a3b8;
+  --border: #e2e8f0;
+  --bg: #f1f5f9;
+  --card: #fff;
+  --radius: 12px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
+  font-family: "Noto Sans SC", system-ui, sans-serif;
+  background: var(--bg);
   min-height: 100vh;
+  color: var(--text-1);
 }
-
-/* 头部布局 */
-.header-card {
-  border-radius: 8px;
-  border: none;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-}
-
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.title-main-zone {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-/* 日历图标 */
-.calendar-icon-box {
-  width: 54px;
-  height: 58px;
-  background: #fff;
-  border: 2px solid #409EFF;
-  border-radius: 8px;
+.app-header {
+  background: linear-gradient(135deg, #0f2847 0%, #1e40af 60%, #3b82f6 100%);
+  color: #fff;
+  padding: 10px 14px;
+  position: relative;
   overflow: hidden;
 }
-
-.cal-top {
-  background: #409EFF;
-  color: #fff;
-  font-size: 11px;
-  text-align: center;
-  padding: 1px 0;
+.app-header::before {
+  content: "";
+  position: absolute;
+  top: -60%;
+  right: -5%;
+  width: clamp(200px, 30vw, 450px);
+  height: clamp(200px, 30vw, 450px);
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
+  border-radius: 50%;
 }
-
-.cal-body {
-  font-size: 24px;
-  font-weight: bold;
-  text-align: center;
-  color: #303133;
-  line-height: 38px;
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  position: relative;
+  z-index: 1;
 }
-
-/* 标题区 */
-.title-text-group {
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+.cal-icon {
+  width: 60px;
+  height: 66px;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(6px);
+  border: 2px solid rgba(255, 255, 255, 0.25);
+  border-radius: 12px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.today-icon {
+  cursor: default;
+}
+.cal-month {
+  background: rgba(255, 255, 255, 0.18);
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 3px 0;
+}
+.cal-day {
+  font-size: 26px;
+  font-weight: 900;
+  text-align: center;
+  line-height: 40px;
+  font-family: "JetBrains Mono", monospace;
+}
+.page-title {
+  margin: 0 0 4px;
+  font-size: 19px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.region-name {
+  color: #fbbf24;
+  font-weight: 900;
+  font-size: 20px;
+}
+.title-sep {
+  opacity: 0.4;
+  font-weight: 300;
+}
+.header-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  font-size: 13px;
+  opacity: 0.88;
+}
+.meta-divider {
+  width: 1px;
+  height: 14px;
+  background: rgba(255, 255, 255, 0.25);
+}
+.meta-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.meta-chip.filter-hint {
+  color: #fbbf24;
+  font-weight: 600;
+}
+.header-right .el-button {
+  --el-button-bg-color: rgba(255, 255, 255, 0.12);
+  --el-button-border-color: rgba(255, 255, 255, 0.25);
+  --el-button-text-color: #fff;
+  --el-button-hover-bg-color: rgba(255, 255, 255, 0.22);
+  --el-button-hover-border-color: rgba(255, 255, 255, 0.35);
+  --el-button-hover-text-color: #fff;
+}
+.app-body {
+  max-width: 99%;
+  margin: 0 auto;
+  padding: 20px 24px;
+}
+.today-hero {
+  background: linear-gradient(135deg, #fefce8, #fef9c3, #fef08a);
+  border: 2px solid #fbbf24;
+  border-radius: var(--radius);
+  padding: 22px 26px;
+  margin-bottom: 16px;
+  position: relative;
+  overflow: hidden;
+}
+.today-hero::after {
+  content: "";
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 90px;
+  opacity: 0.06;
+  pointer-events: none;
+}
+.hero-badge-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
+.hero-date-badge,
+.hero-span-badge {
+  display: inline-block;
+  padding: 3px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.hero-date-badge {
+  background: #fbbf24;
+  color: #78350f;
+}
+.hero-span-badge {
+  background: rgba(120, 53, 15, 0.08);
+  color: #92400e;
+}
+.hero-headline {
+  font-size: 18px;
+  font-weight: 800;
+  color: #78350f;
+  margin: 0 0 8px;
+}
+.hero-date-em {
+  color: #b45309;
+  font-size: 20px;
+}
+.hero-desc {
+  font-size: 13.5px;
+  color: #78350f;
+  line-height: 1.75;
+  margin-bottom: 14px;
+  position: relative;
+  z-index: 1;
+}
+.hero-desc .hot {
+  color: #dc2626;
+}
+.hero-desc .cold {
+  color: #2563eb;
+}
+.hero-stats {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  position: relative;
+  z-index: 1;
+}
+.hero-stat-group {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 8px;
 }
-
-.top-row {
+.hero-stat {
+  background: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(251, 191, 36, 0.3);
+  border-radius: 10px;
+  padding: 10px 16px;
+  min-width: clamp(80px, 10vw, 150px);
+  text-align: center;
+}
+.hs-label {
+  font-size: 11px;
+  color: #92400e;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+.hs-val {
+  font-size: 22px;
+  font-weight: 800;
+  font-family: "JetBrains Mono", monospace;
+}
+.hs-unit {
+  font-size: 12px;
+  font-weight: 400;
+  opacity: 0.7;
+  margin-left: 2px;
+}
+.control-bar {
   display: flex;
   align-items: center;
   gap: 10px;
+  padding: 12px 20px;
+  background: var(--card);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  margin-bottom: 14px;
+  flex-wrap: wrap;
 }
-
-.main-title {
-  margin: 0;
-  font-size: 20px;
-  color: #2c3e50;
-}
-
-.bottom-row {
+.cb-group {
   display: flex;
   align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.cb-label {
   font-size: 13px;
-  color: #909399;
-}
-
-/* 内联选择器样式 */
-.inline-select {
-  width: 90px;
-}
-
-:deep(.inline-select .el-input__inner) {
-  border: none;
-  background: transparent;
-  padding: 0 5px;
-  color: #409EFF;
-  font-weight: bold;
-  height: 24px;
-  line-height: 24px;
-}
-
-:deep(.inline-select .el-input__suffix) {
-  display: none;
-}
-
-/* 隐藏小箭头以保持简洁，或保留 */
-
-.info-item i {
-  margin-right: 3px;
-  color: #409EFF;
-}
-
-.control-panel {
+  font-weight: 600;
+  color: var(--text-2);
+  white-space: nowrap;
   display: flex;
   align-items: center;
-  gap: 12px;
-}
-
-.year-select {
-  width: 110px;
-}
-
-/* 模块样式 */
-.module-card {
-  border-radius: 10px;
-  margin-bottom: 20px;
-  border: none;
-}
-
-.chart-box {
-  width: 100%;
-  height: 350px;
-}
-
-.table-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.date-cell {
-  font-family: monospace;
-  font-weight: bold;
-  color: #409EFF;
-}
-
-.summary-card {
-  background: #fffbe6;
-  border-left: 5px solid #faad14;
-}
-
-/* 灾情卡片内部容器 */
-.disaster-card :deep(.el-card__body) {
-  padding-top: 10px; /* 进一步确保 body 顶部有呼吸感 */
-}
-
-/* 时间线整体样式优化 */
-.custom-timeline {
-  padding-top: 25px;    /* 关键：拉开与卡片标题的距离 */
-  padding-left: 5px;    /* 关键：让时间线尽可能靠左对齐 */
-  margin-top: 10px;
-}
-
-/* 调整时间线内部每一项的间距 */
-.custom-timeline :deep(.el-timeline-item) {
-  padding-bottom: 25px; /* 拉开每条灾情之间的垂直距离 */
-}
-
-/* 时间戳样式微调 */
-.custom-timeline :deep(.el-timeline-item__timestamp) {
-  font-weight: bold;
-  font-size: 14px;
-  color: #303133;
-  margin-bottom: 12px; /* 时间戳与下方灾情盒子的间距 */
-}
-
-/* 灾情内容盒子微调 */
-.disaster-box {
-  background: #f8f9fb;
-  padding: 15px;       /* 增加内部填充，显得不拥挤 */
-  border-radius: 8px;
-  border: 1px solid #ebeef5;
-  margin-left: -5px;   /* 配合靠左对齐，微调内容位置 */
-}
-
-.tag-row {
-  margin-bottom: 6px;
-  display: flex;
   gap: 4px;
 }
+.cb-sep {
+  width: 1px;
+  height: 24px;
+  background: var(--border);
+  margin: 0 8px;
+}
+.chip-group {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.chip {
+  padding: 5px 14px;
+  border-radius: 20px;
+  font-size: 12.5px;
+  font-weight: 500;
+  border: 1.5px solid var(--border);
+  background: var(--card);
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--text-2);
+  user-select: none;
+}
+.chip:hover {
+  border-color: var(--blue);
+  color: var(--blue);
+}
+.chip.active {
+  background: var(--blue);
+  color: #fff;
+  border-color: var(--blue);
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
+}
+.filter-panel {
+  background: var(--card);
+  border: 1.5px solid #fed7aa;
+  border-radius: var(--radius);
+  margin-bottom: 16px;
+  overflow: hidden;
+  box-shadow: var(--shadow);
+}
+.filter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px 20px;
+  cursor: pointer;
+  user-select: none;
+  background: linear-gradient(90deg, #fffbeb, #fff7ed);
+  transition: background 0.2s;
+}
+.filter-header:hover {
+  background: linear-gradient(90deg, #fef3c7, #ffedd5);
+}
+.fh-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #92400e;
+}
+.fh-arrow {
+  transition: transform 0.3s;
+  color: #92400e;
+}
+.fh-arrow.open {
+  transform: rotate(180deg);
+}
+.filter-body {
+  padding: 18px 20px;
+}
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.filter-group {
+  background: #fafafa;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 14px 16px;
+}
+.fg-title {
+  font-size: 13px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.fg-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.fg-dot.rain {
+  background: var(--blue);
+}
+.fg-dot.temp {
+  background: var(--red);
+}
+.fg-dot.year-dot {
+  background: var(--green);
+}
+.fg-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+.fg-label {
+  font-size: 12px;
+  color: var(--text-2);
+  width: clamp(64px, 16%, 100px);
+  flex-shrink: 0;
+  font-weight: 500;
+}
+.fg-unit {
+  font-size: 11px;
+  color: var(--text-3);
+}
+.fg-sep {
+  color: var(--text-3);
+}
+.level-chips {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+.level-chip {
+  padding: 3px 10px;
+  border-radius: 14px;
+  font-size: 11.5px;
+  border: 1.5px solid var(--border);
+  background: #fff;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--text-2);
+  user-select: none;
+}
+.level-chip:hover {
+  border-color: var(--blue);
+  color: var(--blue);
+}
+.level-chip.active {
+  background: var(--blue);
+  color: #fff;
+  border-color: var(--blue);
+}
+.filter-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 12px;
+  border-top: 1px dashed #e5e7eb;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.fa-result {
+  font-size: 13px;
+  color: var(--text-2);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.fa-result b {
+  color: var(--blue);
+  font-size: 16px;
+  font-weight: 700;
+}
+.no-hit {
+  color: var(--red);
+  margin-left: 4px;
+}
+.fa-btns {
+  display: flex;
+  gap: 8px;
+}
+.main-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 26%);
+  gap: 20px;
+}
+@media (max-width: 1100px) {
+  .main-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.mod-card {
+  border-radius: var(--radius) !important;
+  border: none !important;
+  box-shadow: var(--shadow) !important;
+  margin-bottom: 18px;
+}
+.card-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.card-hd-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  font-size: 14px;
+}
+.card-hd-unit {
+  font-size: 12px;
+  color: var(--text-3);
+}
+.chart-box {
+  width: 100%;
+  height: min(50vh, 400px);
+}
+.table-card {
+  :deep(.el-card__body) {
+    padding: 0 6px 20px;
+  }
+  :deep(.el-table) {
+    width: 100%;
+  }
+}
+.table-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.table-hd-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 14px;
+}
+.table-hd-right {
+  display: flex;
+  align-items: center;
+}
+.cell-year {
+  font-family: "JetBrains Mono", monospace;
+  font-weight: 600;
+  color: var(--blue);
+}
+.cell-date {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  color: var(--text-2);
+}
+.val-warn {
+  color: var(--amber);
+  font-weight: 600;
+}
+.val-danger {
+  color: var(--red);
+  font-weight: 600;
+}
+.val-extreme {
+  color: #b91c1c;
+  font-weight: 700;
+}
+.val-cold {
+  color: var(--blue);
+  font-weight: 600;
+}
+.val-cold-x {
+  color: #1e3a8a;
+  font-weight: 700;
+}
+:deep(.row-hit) {
+  background-color: #ecfdf5 !important;
+}
+:deep(.row-dim td) {
+  color: #cbd5e1 !important;
+  background-color: #fafafa !important;
+}
+:deep(.row-extreme) {
+  position: relative;
+}
+:deep(.row-extreme td) {
+  font-weight: 700 !important;
+}
+.extreme_cell {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.extreme-badge {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 800;
+  padding: 1px 5px;
+  border-radius: 4px;
+  color: #fff;
+  line-height: 1.3;
+  letter-spacing: 0.5px;
+  vertical-align: middle;
+}
+.rain-badge {
+  background: #7c3aed;
+}
+.hot-badge {
+  background: #dc2626;
+}
+.cold-badge {
+  background: #1d4ed8;
+}
+.table-fade-hint {
+  text-align: center;
+  padding: 10px 0;
+  position: relative;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 30%, #fff 100%);
+  margin-top: -30px;
+}
+.filter-stats-bar {
+  margin-top: 10px;
+  padding: 10px 0 0;
+  border-top: 1px solid var(--border);
+  background: linear-gradient(90deg, #ecfdf5, #eff6ff);
+  font-size: 12.5px;
+  color: #334155;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.filter-stats-bar .blue {
+  color: var(--blue);
+}
+.filter-stats-bar .red {
+  color: var(--red);
+}
+.summary-card {
+  border-left: 4px solid var(--amber) !important;
+}
+.summary-card :deep(.el-card__body) {
+  background: linear-gradient(135deg, #fffbeb, #fefce8);
+}
+.summary-text {
+  font-size: 13.5px;
+  line-height: 1.8;
+  color: #78350f;
+}
+.filter-summary-box {
+  margin-top: 12px;
+  padding: 10px 14px;
+  background: rgba(37, 99, 235, 0.05);
+  border-radius: 8px;
+  border-left: 3px solid var(--blue);
+}
+.filter-summary-box p {
+  font-size: 12.5px;
+  line-height: 1.7;
+  color: var(--text-2);
+  margin: 0;
+}
+.disaster-card {
+  border-left: 4px solid var(--red) !important;
+}
+@media (max-width: 768px) {
+  .app-header {
+    padding: 12px;
+  }
+  .header-inner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .header-left {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  .page-title {
+    font-size: 16px;
+  }
+  .cal-icon {
+    width: 48px;
+    height: 54px;
+  }
+  .cal-day {
+    font-size: 20px;
+  }
+  .app-body {
+    padding: 12px;
+  }
+  .today-hero {
+    padding: 14px;
+  }
+  .hero-headline {
+    font-size: 15px;
+  }
+  .hero-desc {
+    font-size: 12.5px;
+  }
+  .hero-stats {
+    flex-direction: column;
+  }
+  .control-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .cb-sep {
+    display: none;
+  }
+  .filter-grid {
+    grid-template-columns: 1fr;
+  }
+  .chart-box {
+    height: min(40vh, 260px);
+  }
+  :deep(.el-table) {
+    overflow-x: auto;
+    display: block;
+  }
+  :deep(.el-table__body-wrapper) {
+    overflow-x: auto;
+  }
+  .table-hd {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  .table-hd-left {
+    font-size: 13px;
+    flex-wrap: wrap;
+  }
+  .table-hd-right {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .header-right .el-button {
+    font-size: 0;
+  }
+  .header-right .el-button .el-icon--right {
+    margin-left: 0;
+  }
+}
 
-.loss-val {
-  color: #cf1322;
-  font-weight: bold;
+@media (max-width: 480px) {
+  .chart-box {
+    height: min(35vh, 220px);
+  }
+  .hero-stat {
+    min-width: 80px;
+    padding: 8px 12px;
+  }
+  .hs-val {
+    font-size: 18px;
+  }
+  .fg-label {
+    width: clamp(50px, 14%, 80px);
+  }
+}
+.rain-prob-card {
+  border-left: 4px solid var(--blue) !important;
+}
+.rain-prob-card :deep(.el-card__body) {
+  padding: 14px 16px;
+}
+.rp-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.rp-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+.rp-label {
+  width: clamp(36px, 18%, 56px);
+  flex-shrink: 0;
+  font-weight: 500;
+  color: var(--text-2);
+}
+.rp-bar-track {
+  flex: 1;
+  height: 8px;
+  background: #f1f5f9;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.rp-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #60a5fa, #2563eb);
+  transition: width 0.3s ease;
+}
+.rp-pct {
+  width: clamp(30px, 14%, 48px);
+  text-align: right;
+  font-weight: 600;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
+  color: var(--text-1);
+}
+.rp-count {
+  width: clamp(32px, 16%, 52px);
+  text-align: right;
+  font-size: 11px;
+  color: var(--text-3);
 }
 </style>
diff --git a/src/views/login.vue b/src/views/login.vue
index 57b94b3..ed32396 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -29,8 +29,8 @@
       </div>
     </div>
     <div class="login-footer">
-      <p><a href="https://www.renren.io/enterprise" target="_blank">企业版</a> | <a href="https://www.renren.io/cloud" target="_blank">微服务版</a></p>
-      <p><a href="https://www.renren.io/" target="_blank">人人开源</a>{{ state.year }} © renren.io</p>
+      <p></p>
+      <p></p>
     </div>
   </div>
 </template>
diff --git a/src/views/oss/oss-config.vue b/src/views/oss/oss-config.vue
index faab408..1321cde 100644
--- a/src/views/oss/oss-config.vue
+++ b/src/views/oss/oss-config.vue
@@ -28,7 +28,7 @@
       </template>
       <template v-else-if="dataForm.type === 2">
         <el-form-item prop="aliyunDomain" label="域名">
-          <el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名，如：http://cdn.renren.io"></el-input>
+          <el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名，如：http://cdn.123.io"></el-input>
         </el-form-item>
         <el-form-item prop="aliyunPrefix" label="路径前缀">
           <el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input>
@@ -82,7 +82,7 @@
       </template>
       <template v-else-if="dataForm.type === 4">
               <el-form-item prop="aliyunDomain" label="域名">
-                <el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名，如：http://cdn.renren.io"></el-input>
+                <el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名，如：http://cdn.123.io"></el-input>
               </el-form-item>
               <el-form-item prop="aliyunPrefix" label="路径前缀">
                 <el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input>
diff --git a/src/views/station/weatherstation-add-or-update.vue b/src/views/station/weatherstation-add-or-update.vue
index 9055298..ad4ae96 100644
--- a/src/views/station/weatherstation-add-or-update.vue
+++ b/src/views/station/weatherstation-add-or-update.vue
@@ -113,6 +113,15 @@
           </el-form-item>
         </el-col>
       </el-row>
+
+      <el-divider>管理部门</el-divider>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="选择部门" prop="deptId">
+            <el-tree :data="deptList" :props="{ label: 'name', children: 'children' }" node-key="id" ref="deptTreeRef" accordion highlight-current @node-click="onDeptClick" style="max-height: 240px; overflow-y: auto; width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 8px"></el-tree>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
 
     <template #footer>
@@ -129,7 +138,7 @@ import { ElMessage } from "element-plus";
 
 // 接收父页面传来的 CSV 原始数组和 Map 索引
 const props = defineProps<{
-  regionsData: any[],
+  regionsData: any[]
   regionMap: Map<number, any>
 }>();
 
@@ -137,6 +146,8 @@ const emit = defineEmits(["refreshDataList"]);
 
 const visible = ref(false);
 const dataFormRef = ref();
+const deptTreeRef = ref();
+const deptList = ref<any[]>([]);
 
 const dataForm = reactive({
   id: "",
@@ -149,7 +160,8 @@ const dataForm = reactive({
   provinceName: "", // 存放省级 ID 字符串
   cityName: "",     // 存放市级 ID 字符串
   countyName: "",    // 存放区级 ID 字符串
-  townName: ""
+  townName: "",
+  deptId: ""
 });
 
 const rules = {
@@ -193,6 +205,16 @@ const onCityChange = (val: string) => {
   }
 };
 
+function getDeptList() {
+  return baseService.get("/sys/dept/list").then((res) => {
+    deptList.value = res.data || [];
+  });
+}
+
+function onDeptClick(data: any) {
+  dataForm.deptId = data.id;
+}
+
 // ----------------- 弹窗操作 -----------------
 
 const init = (id?: number) => {
@@ -209,12 +231,15 @@ const init = (id?: number) => {
       provinceName: "",
       cityName: "",
       countyName: "",
-      townName: ""
+      townName: "",
+      deptId: ""
     });
 
-    if (id) {
-      getInfo(id);
-    }
+    getDeptList().then(() => {
+      if (id) {
+        getInfo(id);
+      }
+    });
   });
 };
 
@@ -233,6 +258,13 @@ const getInfo = async (id: number) => {
   if (data.cityName) {
     countyOptions.value = props.regionsData.filter(r => Number(r.parentId) === Number(data.cityName));
   }
+
+  // 3. 回显选择的管理部门
+  if (data.deptId) {
+    nextTick(() => {
+      deptTreeRef.value?.setCurrentKey(data.deptId);
+    });
+  }
 };
 
 // 提交
diff --git a/src/views/station/weatherstation.vue b/src/views/station/weatherstation.vue
index 1e73c86..baaf3e3 100644
--- a/src/views/station/weatherstation.vue
+++ b/src/views/station/weatherstation.vue
@@ -1,15 +1,22 @@
 <template>
   <div class="mod-station__weatherstation">
     <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
+      <el-form-item>
+        <el-input v-model="state.dataForm.stationName" placeholder="区站名称" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-input v-model="state.dataForm.stationCode" placeholder="区站编号" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="state.getDataList()">查询</el-button>
+      </el-form-item>
+
       <el-form-item>
         <el-button v-if="state.hasPermission('station:weatherstation:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
       </el-form-item>
       <el-form-item>
         <el-button v-if="state.hasPermission('station:weatherstation:delete')" type="danger" @click="state.deleteHandle()">删除</el-button>
       </el-form-item>
-<!--      <el-form-item>-->
-<!--        <el-button v-if="state.hasPermission('station:weatherstation:save')" type="primary" @click="batchInsert()">快速导入</el-button>-->
-<!--      </el-form-item>-->
     </el-form>
 
     <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
@@ -17,6 +24,9 @@
       <el-table-column prop="id" label="编号" header-align="center" align="center"></el-table-column>
       <el-table-column prop="stationCode" label="区站号" header-align="center" align="center"></el-table-column>
       <el-table-column prop="stationName" label="站点" header-align="center" align="center"></el-table-column>
+      <el-table-column label="归属部门" header-align="center" align="center">
+        <template #default="{ row }">{{ deptMap.get(Number(row.deptId)) || "" }}</template>
+      </el-table-column>
       <el-table-column prop="stationLevel" label="测站级别" header-align="center" align="center">
         <template v-slot="row">
           {{ state.getDictLabel("station_level", row.row.stationLevel) }}
@@ -49,12 +59,7 @@
     <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
 
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update
-      ref="addOrUpdateRef"
-      :regions-data="regionsData"
-      :region-map="regionMap"
-      @refreshDataList="state.getDataList">
-    </add-or-update>
+    <add-or-update ref="addOrUpdateRef" :regions-data="regionsData" :region-map="regionMap" @refreshDataList="state.getDataList"> </add-or-update>
   </div>
 </template>
 
@@ -62,6 +67,7 @@
 import useView from "@/hooks/useView";
 import { reactive, ref, toRefs, onMounted } from "vue";
 import AddOrUpdate from "./weatherstation-add-or-update.vue";
+import baseService from "@/service/baseService";
 
 // 表格 state
 const view = reactive({
@@ -69,9 +75,17 @@ const view = reactive({
   getDataListURL: "/station/weatherstation/page",
   getDataListIsPage: true,
   exportURL: "/station/weatherstation/export",
-  deleteURL: "/station/weatherstation"
+  deleteURL: "/station/weatherstation",
+  dataForm: {
+    id: "",
+    stationName: "",
+    stationCode: ""
+  }
+});
+const state = reactive({
+  ...useView(view),
+  ...toRefs(view)
 });
-const state = reactive({ ...useView(view), ...toRefs(view) });
 
 // 弹窗 ref
 const addOrUpdateRef = ref();
@@ -87,21 +101,39 @@ const addOrUpdateHandle = (id?: number) => {
 const regionsData = ref<any[]>([]);
 const regionMap = reactive(new Map<number, any>());
 
+// ---------------- 部门数据加载 ----------------
+const deptMap = reactive(new Map<number, string>());
+async function loadDepts() {
+  try {
+    const res = await baseService.get("/sys/dept/list");
+    const flat = (list: any[]) => {
+      list.forEach((d) => {
+        deptMap.set(Number(d.id), d.name);
+        if (d.children) flat(d.children);
+      });
+    };
+    flat(res.data || []);
+  } catch {
+    // ignore
+  }
+}
+
 onMounted(async () => {
+  loadDepts();
   const res = await fetch("/region.csv");
   const text = await res.text();
   const parseCSV = (csvText: string) => {
-    const lines = csvText.split("\n").filter(l => l.trim());
+    const lines = csvText.split("\n").filter((l) => l.trim());
     const headers = lines[0].split(",");
-    return lines.slice(1).map(line => {
+    return lines.slice(1).map((line) => {
       const cols = line.split(",");
       const obj: any = {};
-      headers.forEach((h,i)=> obj[h.trim()]=cols[i].trim());
+      headers.forEach((h, i) => (obj[h.trim()] = cols[i].trim()));
       return obj;
     });
   };
   const data = parseCSV(text);
-  data.forEach(r=>{
+  data.forEach((r) => {
     const id = Number(r.id);
     const parentId = Number(r.parentId);
     const level = Number(r.level);
diff --git a/src/views/sys/user-add-or-update.vue b/src/views/sys/user-add-or-update.vue
index 43e5bec..6ac6d55 100644
--- a/src/views/sys/user-add-or-update.vue
+++ b/src/views/sys/user-add-or-update.vue
@@ -5,7 +5,7 @@
         <el-input v-model="dataForm.username" placeholder="用户名"></el-input>
       </el-form-item>
       <el-form-item prop="deptName" label="所属部门">
-        <ren-dept-tree v-model="dataForm.deptId" placeholder="选择部门" v-model:deptName="dataForm.deptName"></ren-dept-tree>
+        <sys-dept-tree v-model="dataForm.deptId" placeholder="选择部门" v-model:deptName="dataForm.deptName"></sys-dept-tree>
       </el-form-item>
       <el-form-item prop="password" label="密码" :class="{ 'is-required': !dataForm.id }">
         <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
@@ -17,7 +17,7 @@
         <el-input v-model="dataForm.realName" placeholder="真实姓名"></el-input>
       </el-form-item>
       <el-form-item prop="gender" label="性别">
-        <ren-radio-group v-model="dataForm.gender" dict-type="gender"></ren-radio-group>
+        <sys-radio-group v-model="dataForm.gender" dict-type="gender"></sys-radio-group>
       </el-form-item>
       <el-form-item prop="email" label="邮箱">
         <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
@@ -137,8 +137,8 @@ const getRoleList = () => {
 const getInfo = (id: number) => {
   baseService.get(`/sys/user/${id}`).then((res) => {
     Object.assign(dataForm, res.data);
-    dataForm.highRoleIdList = dataForm.roleIdList.filter(id => !roleList.value.some(role => role.id === id));
-    dataForm.roleIdList = dataForm.roleIdList.filter(id => !dataForm.highRoleIdList.includes(id))
+    dataForm.highRoleIdList = dataForm.roleIdList.filter((id) => !roleList.value.some((role) => role.id === id));
+    dataForm.roleIdList = dataForm.roleIdList.filter((id) => !dataForm.highRoleIdList.includes(id));
   });
 };
 
@@ -150,7 +150,7 @@ const dataFormSubmitHandle = () => {
     }
     (!dataForm.id ? baseService.post : baseService.put)("/sys/user", {
       ...dataForm,
-      roleIdList: [...dataForm.roleIdList,...dataForm.highRoleIdList]
+      roleIdList: [...dataForm.roleIdList, ...dataForm.highRoleIdList]
     }).then((res) => {
       ElMessage.success({
         message: "成功",
diff --git a/src/views/sys/user.vue b/src/views/sys/user.vue
index 936117d..1e6a1b9 100644
--- a/src/views/sys/user.vue
+++ b/src/views/sys/user.vue
@@ -5,10 +5,10 @@
         <el-input v-model="state.dataForm.username" placeholder="用户名" clearable></el-input>
       </el-form-item>
       <el-form-item>
-        <ren-select v-model="state.dataForm.gender" dict-type="gender" placeholder="性别"></ren-select>
+        <sys-select v-model="state.dataForm.gender" dict-type="gender" placeholder="性别"></sys-select>
       </el-form-item>
       <el-form-item>
-        <ren-dept-tree v-model="state.dataForm.deptId" placeholder="选择部门" :query="true"></ren-dept-tree>
+        <sys-dept-tree v-model="state.dataForm.deptId" placeholder="选择部门" :query="true"></sys-dept-tree>
       </el-form-item>
       <el-form-item>
         <el-button @click="state.getDataList()">查询</el-button>
diff --git a/src/views/weather/631weather-data.vue b/src/views/weather/631weather-data.vue
new file mode 100644
index 0000000..1ce2e6a
--- /dev/null
+++ b/src/views/weather/631weather-data.vue
@@ -0,0 +1,596 @@
+<template>
+  <div class="mod-weather__real-time-monitoring" v-loading="state.loading">
+    <div class="page-header">
+      <div>
+        <h2 class="page-title">631气象信息</h2>
+      </div>
+      <div class="page-header-actions">
+        <el-tag type="info">层级 {{ state.selectedPath.length }} 级</el-tag>
+        <el-tag type="success">文件 {{ state.fileItems.length }}</el-tag>
+        <el-button type="primary" plain icon="Refresh" @click="refresh">刷新</el-button>
+      </div>
+    </div>
+
+    <el-alert v-if="state.errorMessage" :title="state.errorMessage" type="error" :closable="false" show-icon class="mb-16" />
+
+    <div class="dept-bar" v-if="levelRows.length">
+      <div class="level-row" v-for="(row, rowIdx) in levelRows" :key="rowIdx">
+        <span class="level-label" v-if="row.label">{{ row.label }}</span>
+        <div class="level-tabs">
+          <div v-for="tab in row.tabs" :key="tab.id" class="level-tab" :class="[{ 'is-active': row.selectedId === tab.id }, `level-${rowIdx}`]" @click="selectTab(rowIdx, tab)">
+            {{ tab.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="page-body" v-if="state.fileItems.length">
+      <aside class="file-list-panel">
+        <div v-for="(item, index) in state.fileItems" :key="item.anchorId" class="file-list-item" :class="{ 'is-active': state.selectedFileIndex === index }" @click="selectFile(index)">
+          <div class="file-list-item__thumb">
+            <span class="file-list-item__icon file-list-item__icon--txt">文</span>
+          </div>
+          <span class="file-list-item__name">{{ item.displayName || `文件-${item.fileId}` }}</span>
+        </div>
+      </aside>
+
+      <section class="preview-panel" v-if="previewItem">
+        <div class="preview-panel__header">
+          <h3 class="preview-panel__title">{{ previewItem.displayName || `文件-${previewItem.fileId}` }}</h3>
+          <el-button type="primary" plain size="small" :loading="state.copyingId === previewItem.anchorId" @click="copyText(previewItem)"> 复制全部文本 </el-button>
+        </div>
+
+        <div class="preview-panel__body">
+          <div class="preview-panel__text preview-panel__text--full">{{ previewItem.content || "暂无文本内容" }}</div>
+        </div>
+      </section>
+
+      <div class="preview-panel preview-panel--empty" v-else>
+        <el-empty description="请在左侧选择要预览的文件" :image-size="120" />
+      </div>
+    </div>
+
+    <el-empty v-else-if="!state.loading && !state.errorMessage" description="该部门暂无可展示文件" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import app from "@/constants/app";
+import baseService from "@/service/baseService";
+import { copyToClipboard } from "@/utils/utils";
+import { ElMessage } from "element-plus";
+import { computed, onMounted, reactive } from "vue";
+
+interface DeptNode {
+  id: string;
+  name: string;
+  children?: DeptNode[];
+}
+
+interface DeptTab {
+  id: string;
+  name: string;
+}
+
+interface DeptFileGroupVO {
+  deptId: string;
+  deptName: string;
+  fileList: { displayName: string; fileId: string; type: string; content: string }[];
+}
+
+interface FileItem {
+  deptId: string;
+  deptName: string;
+  displayName: string;
+  fileId: string;
+  type: string;
+  content: string;
+  anchorId: string;
+}
+
+const IMAGE_EXTS = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg"];
+
+const isImageFile = (type: string) => {
+  if (!type) return true;
+  const lower = type.toLowerCase();
+  return IMAGE_EXTS.some((ext) => lower.includes(ext));
+};
+
+const state = reactive({
+  loading: true,
+  errorMessage: "",
+  fileItems: [] as FileItem[],
+  copyingId: "",
+  deptTreeData: [] as DeptNode[],
+  selectedPath: [] as string[],
+  selectedFileIndex: 0
+});
+
+const previewItem = computed(() => {
+  if (state.selectedFileIndex >= 0 && state.selectedFileIndex < state.fileItems.length) {
+    return state.fileItems[state.selectedFileIndex];
+  }
+  return state.fileItems.length > 0 ? state.fileItems[0] : null;
+});
+
+const transformGroups = (list: DeptFileGroupVO[]) => {
+  const items: FileItem[] = [];
+
+  list.forEach((group) => {
+    (group.fileList || []).forEach((file) => {
+      if (isImageFile(file.type)) return;
+      items.push({
+        deptId: group.deptId,
+        deptName: group.deptName,
+        displayName: file.displayName,
+        fileId: file.fileId,
+        type: file.type,
+        content: file.content || "",
+        anchorId: `txt-${file.fileId}`
+      });
+    });
+  });
+
+  state.fileItems = items;
+  state.selectedFileIndex = 0;
+};
+
+const activeDeptId = computed(() => {
+  if (state.selectedPath.length > 0) {
+    return state.selectedPath[state.selectedPath.length - 1];
+  }
+  return null;
+});
+
+interface LevelRow {
+  tabs: DeptTab[];
+  selectedId: string | null;
+  label: string;
+}
+
+const LEVEL_LABELS = ["一级", "二级", "三级", "四级", "五级", "六级"];
+
+const levelRows = computed<LevelRow[]>(() => {
+  const rows: LevelRow[] = [];
+  let nodes: DeptNode[] = state.deptTreeData;
+
+  for (let i = 0; i < state.selectedPath.length; i++) {
+    const selId = state.selectedPath[i];
+    rows.push({
+      tabs: nodes.map((n) => ({ id: n.id, name: n.name })),
+      selectedId: selId,
+      label: LEVEL_LABELS[i] || `${i + 1}级`
+    });
+    const selNode = nodes.find((n) => n.id === selId);
+    if (selNode?.children?.length) {
+      nodes = selNode.children;
+    } else {
+      nodes = [];
+      break;
+    }
+  }
+
+  if (nodes.length > 0) {
+    rows.push({
+      tabs: nodes.map((n) => ({ id: n.id, name: n.name })),
+      selectedId: null,
+      label: LEVEL_LABELS[rows.length] || `${rows.length + 1}级`
+    });
+  }
+
+  return rows;
+});
+
+const loadData = async (deptId: string) => {
+  state.loading = true;
+  state.errorMessage = "";
+  try {
+    const res = await baseService.get("/filescan/record/tree", { deptId });
+    transformGroups((res.data || []) as DeptFileGroupVO[]);
+    selectFile(0);
+  } catch (error: any) {
+    state.errorMessage = error?.message || "加载失败";
+    state.fileItems = [];
+  } finally {
+    state.loading = false;
+  }
+};
+
+const loadDeptTree = async (): Promise<string | null> => {
+  try {
+    const res = await baseService.get("/sys/dept/list");
+    const treeData = (res.data || []) as DeptNode[];
+    state.deptTreeData = treeData;
+
+    if (!treeData.length) return null;
+
+    const firstRoot = treeData[0];
+    const firstChild = firstRoot.children?.length ? firstRoot.children[0] : firstRoot;
+
+    const buildPath = (nodes: DeptNode[], targetId: string, path: string[]): string[] | null => {
+      for (const node of nodes) {
+        const newPath = [...path, node.id];
+        if (node.id === targetId) return newPath;
+        if (node.children?.length) {
+          const found = buildPath(node.children, targetId, newPath);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    const path = buildPath(treeData, firstChild.id, []);
+    state.selectedPath = path || [firstRoot.id];
+    return firstChild.id;
+  } catch {
+    state.deptTreeData = [];
+    return null;
+  }
+};
+
+const selectTab = (levelIdx: number, tab: DeptTab) => {
+  state.selectedPath = [...state.selectedPath.slice(0, levelIdx), tab.id];
+  state.fileItems = [];
+  state.selectedFileIndex = 0;
+  loadData(tab.id);
+};
+
+const refresh = () => {
+  if (activeDeptId.value !== null) {
+    loadData(activeDeptId.value);
+  }
+};
+
+const selectFile = (index: number) => {
+  state.selectedFileIndex = index;
+};
+
+const copyText = (item: FileItem) => {
+  state.copyingId = item.anchorId;
+  copyToClipboard(item.content || "");
+  ElMessage.success("文本已复制成功");
+  state.copyingId = "";
+};
+
+onMounted(async () => {
+  const deptId = await loadDeptTree();
+  if (deptId !== null) {
+    loadData(deptId);
+  }
+});
+</script>
+
+<style scoped>
+.mod-weather__real-time-monitoring {
+  min-height: calc(100vh - 140px);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  color: #303133;
+}
+
+.page-desc {
+  margin: 8px 0 0;
+  color: #909399;
+  line-height: 1.6;
+}
+
+.page-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
+/* ==== 部门选择栏 ==== */
+.dept-bar {
+  margin-bottom: 16px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 10px 16px 8px;
+}
+
+.level-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.level-row:last-child {
+  margin-bottom: 4px;
+}
+
+.level-label {
+  font-size: 13px;
+  color: #909399;
+  flex-shrink: 0;
+  min-width: 32px;
+}
+
+.level-tabs {
+  display: flex;
+  gap: 0;
+  flex-wrap: wrap;
+}
+
+.level-tab {
+  padding: 4px 16px;
+  font-size: 13px;
+  color: #606266;
+  background: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.2s, background 0.2s, border-color 0.2s;
+}
+
+.level-tab + .level-tab {
+  margin-left: 6px;
+}
+
+.level-tab:hover {
+  color: var(--el-color-primary);
+  background: #ecf5ff;
+}
+
+.level-tab.is-active {
+  color: #fff;
+  font-weight: 500;
+}
+
+.level-tab.is-active.level-0 {
+  background: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+
+.level-tab.is-active.level-1 {
+  background: var(--el-color-primary-light-3);
+  border-color: var(--el-color-primary-light-3);
+}
+
+.level-tab.is-active.level-2 {
+  background: var(--el-color-success);
+  border-color: var(--el-color-success);
+}
+
+.level-tab.is-active.level-3 {
+  background: var(--el-color-warning);
+  border-color: var(--el-color-warning);
+}
+
+.level-tab.is-active.level-4 {
+  background: var(--el-color-danger);
+  border-color: var(--el-color-danger);
+}
+
+.level-tab.is-active.level-5 {
+  background: #8b5cf6;
+  border-color: #8b5cf6;
+}
+
+/* ==== 主体两栏 ==== */
+.page-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+/* ==== 左侧文件列表 ==== */
+.file-list-panel {
+  position: sticky;
+  top: 16px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 4px;
+  max-height: calc(100vh - 320px);
+  overflow-y: auto;
+}
+
+.file-list-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  font-size: 13px;
+  color: #606266;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.file-list-item:hover {
+  background: #f5f7fa;
+}
+
+.file-list-item.is-active {
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  font-weight: 500;
+}
+
+.file-list-item__thumb {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #f0f2f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-list-item__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.file-list-item__icon {
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-list-item__icon--img {
+  background: var(--el-color-success);
+}
+
+.file-list-item__icon--txt {
+  background: var(--el-color-warning);
+}
+
+.file-list-item__icon--other {
+  background: #c0c4cc;
+}
+
+.file-list-item__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.5;
+}
+
+/* ==== 右侧预览面板 ==== */
+.preview-panel {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+.preview-panel--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+.preview-panel__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.preview-panel__actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.preview-panel__title {
+  margin: 0;
+  font-size: 20px;
+  color: #303133;
+  word-break: break-all;
+}
+
+.preview-panel__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.preview-panel__loading {
+  text-align: center;
+  color: #909399;
+  padding: 60px 0;
+  font-size: 14px;
+}
+
+.preview-zoom-area {
+  overflow: hidden;
+  border-radius: 8px;
+  background: #f5f7fa;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-panel__img {
+  display: block;
+  max-width: 100%;
+  max-height: 60vh;
+  border-radius: 8px;
+  user-select: none;
+  pointer-events: auto;
+}
+
+.preview-panel__text--full {
+  min-height: 200px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.preview-panel__text {
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 12px 14px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.image-card__error,
+.image-card__unsupported {
+  color: #e6a23c;
+  font-size: 14px;
+  line-height: 1.6;
+  padding: 12px 14px;
+  background: #fdf6ec;
+  border-radius: 8px;
+}
+
+/* ==== 响应式 ==== */
+@media (max-width: 992px) {
+  .page-body {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header,
+  .preview-panel__header,
+  .preview-panel__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .level-tab {
+    padding: 4px 10px;
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/src/views/weather/prediction.vue b/src/views/weather/prediction.vue
new file mode 100644
index 0000000..88baff9
--- /dev/null
+++ b/src/views/weather/prediction.vue
@@ -0,0 +1,516 @@
+<template>
+  <div class="mod-weather__prediction" v-loading="state.loading">
+    <div class="page-header">
+      <div>
+        <h2 class="page-title">中尺度模式回波预报</h2>
+      </div>
+      <div class="page-header-actions">
+        <el-tag type="success">文件 {{ state.fileItems.length }}</el-tag>
+        <el-button type="primary" plain icon="Refresh" @click="loadData">刷新</el-button>
+      </div>
+    </div>
+
+    <el-alert v-if="state.errorMessage" :title="state.errorMessage" type="error" :closable="false" show-icon class="mb-16" />
+
+    <div class="page-body" v-if="state.fileItems.length">
+      <aside class="file-list-panel">
+        <div v-for="(item, index) in state.fileItems" :key="item.anchorId" class="file-list-item" :class="{ 'is-active': state.selectedFileIndex === index }" @click="selectFile(index)">
+          <div class="file-list-item__thumb">
+            <img v-if="blobUrlCache[item.fileId]" :src="blobUrlCache[item.fileId]" class="file-list-item__img" alt="{{item.displayName}}}" />
+            <span v-else-if="isImageFile(item.type)" class="file-list-item__icon file-list-item__icon--img">GIF</span>
+            <span v-else class="file-list-item__icon file-list-item__icon--other">—</span>
+          </div>
+          <span class="file-list-item__name">{{ item.displayName || `文件-${item.fileId}` }}</span>
+        </div>
+      </aside>
+
+      <section class="preview-panel" v-if="previewItem">
+        <div class="preview-panel__header">
+          <h3 class="preview-panel__title">{{ previewItem.displayName || `文件-${previewItem.fileId}` }}</h3>
+          <div class="preview-panel__actions">
+            <el-button type="primary" plain size="small" :loading="state.copyingId === previewItem.anchorId" @click="copyImage(previewItem)"> 复制图片 </el-button>
+            <el-button type="success" plain size="small" @click="downloadFile(previewItem)"> 下载原图 </el-button>
+          </div>
+        </div>
+
+        <div class="preview-panel__body">
+          <div v-if="!previewBlobUrl && selectedFileId" class="preview-panel__loading">加载中...</div>
+          <div v-show="previewBlobUrl" class="preview-zoom-area" @wheel.prevent="onWheel" @mousedown="onPanStart" @dblclick="resetZoom">
+            <img :src="previewBlobUrl" :alt="previewItem.displayName" :style="zoomStyle" class="preview-panel__img" draggable="false" />
+          </div>
+        </div>
+      </section>
+
+      <div class="preview-panel preview-panel--empty" v-else>
+        <el-empty description="请在左侧选择要预览的文件" :image-size="120" />
+      </div>
+    </div>
+
+    <el-empty v-else-if="!state.loading && !state.errorMessage" description="暂无可供展示的文件" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import app from "@/constants/app";
+import { CacheToken } from "@/constants/cacheKey";
+import baseService from "@/service/baseService";
+import { getCache } from "@/utils/cache";
+import { ElMessage } from "element-plus";
+import axios from "axios";
+import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
+
+interface ModelFileItemVO {
+  type: string;
+  display_name: string;
+  file_name: string;
+  file_id: string;
+}
+
+interface ModelFileGroupVO {
+  type: string;
+  file_list: ModelFileItemVO[];
+}
+
+interface FileItem {
+  type: string;
+  displayName: string;
+  fileId: string;
+  anchorId: string;
+}
+
+const state = reactive({
+  loading: true,
+  errorMessage: "",
+  fileItems: [] as FileItem[],
+  copyingId: "",
+  selectedFileIndex: 0
+});
+
+const blobUrlCache = {} as Record<string, string>;
+const blobPromises = {} as Record<string, Promise<string> | undefined>;
+const previewBlobUrl = ref("");
+const selectedFileId = ref("");
+
+const IMAGE_EXTS = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg"];
+
+const isImageFile = (type: string) => {
+  if (!type) return true;
+  const lower = type.toLowerCase();
+  return IMAGE_EXTS.some((ext) => lower.includes(ext));
+};
+
+const previewItem = computed(() => {
+  if (state.selectedFileIndex >= 0 && state.selectedFileIndex < state.fileItems.length) {
+    return state.fileItems[state.selectedFileIndex];
+  }
+  return state.fileItems.length > 0 ? state.fileItems[0] : null;
+});
+
+const loadBlobUrl = (fileId: string): Promise<string> => {
+  if (blobUrlCache[fileId]) return Promise.resolve(blobUrlCache[fileId]);
+  if (blobPromises[fileId]) return blobPromises[fileId];
+
+  const base = (app.api || "").replace(/\/$/, "");
+  const url = `${base}/filescan/file/display/${fileId}`;
+  const token = getCache(CacheToken, { isSessionStorage: true }, {})?.token;
+  const headers: Record<string, string> = {};
+  if (token) headers.token = token;
+
+  const promise = axios
+    .get(url, { responseType: "blob", headers })
+    .then((res) => {
+      const objectUrl = URL.createObjectURL(res.data as Blob);
+      blobUrlCache[fileId] = objectUrl;
+      return objectUrl;
+    })
+    .finally(() => {
+      delete blobPromises[fileId];
+    });
+
+  blobPromises[fileId] = promise;
+  return promise;
+};
+
+const zoomScale = ref(1);
+const panX = ref(0);
+const panY = ref(0);
+const isPanning = ref(false);
+let panStartX = 0;
+let panStartY = 0;
+let panOriginX = 0;
+let panOriginY = 0;
+
+const zoomStyle = computed(() => ({
+  transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoomScale.value})`,
+  cursor: isPanning.value ? "grabbing" : "grab",
+  transition: isPanning.value ? "none" : "transform 0.15s ease"
+}));
+
+const resetZoom = () => {
+  zoomScale.value = 1;
+  panX.value = 0;
+  panY.value = 0;
+};
+
+const onWheel = (e: WheelEvent) => {
+  e.preventDefault();
+  const delta = e.deltaY > 0 ? -0.15 : 0.15;
+  const newScale = Math.max(0.2, Math.min(5, zoomScale.value + delta));
+  zoomScale.value = newScale;
+  if (newScale <= 1) {
+    panX.value = 0;
+    panY.value = 0;
+  }
+};
+
+const onPanStart = (e: MouseEvent) => {
+  if (zoomScale.value <= 1) return;
+  isPanning.value = true;
+  panStartX = e.clientX;
+  panStartY = e.clientY;
+  panOriginX = panX.value;
+  panOriginY = panY.value;
+  document.addEventListener("mousemove", onPanMove);
+  document.addEventListener("mouseup", onPanEnd);
+};
+
+const onPanMove = (e: MouseEvent) => {
+  if (!isPanning.value) return;
+  panX.value = panOriginX + (e.clientX - panStartX);
+  panY.value = panOriginY + (e.clientY - panStartY);
+};
+
+const onPanEnd = () => {
+  isPanning.value = false;
+  document.removeEventListener("mousemove", onPanMove);
+  document.removeEventListener("mouseup", onPanEnd);
+};
+
+const selectFile = async (index: number) => {
+  state.selectedFileIndex = index;
+  const item = state.fileItems[index];
+  if (!item) return;
+
+  selectedFileId.value = item.fileId;
+  resetZoom();
+  previewBlobUrl.value = "";
+
+  previewBlobUrl.value = await loadBlobUrl(item.fileId);
+};
+
+const downloadFile = async (item: FileItem) => {
+  const filename = item.displayName || `file-${item.fileId}`;
+  await loadBlobUrl(item.fileId);
+  const a = document.createElement("a");
+  a.href = blobUrlCache[item.fileId];
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+};
+
+const copyImage = async (item: FileItem) => {
+  if (!isImageFile(item.type)) {
+    ElMessage.warning("当前文件不是图片类型，无法复制");
+    return;
+  }
+  state.copyingId = item.anchorId;
+  try {
+    await loadBlobUrl(item.fileId);
+    const blobUrl = blobUrlCache[item.fileId];
+    const res = await fetch(blobUrl);
+    const blob = await res.blob();
+    try {
+      await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+    } catch (e: any) {
+      if (e.name === "NotAllowedError" || e.message?.includes?.("not supported")) {
+        await convertToPngAndCopy(blob);
+      } else {
+        throw e;
+      }
+    }
+    ElMessage.success("图片已复制成功");
+  } catch (error: any) {
+    ElMessage.error(error?.message || "复制图片失败");
+  } finally {
+    state.copyingId = "";
+  }
+};
+
+const convertToPngAndCopy = (blob: Blob): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(blob);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      const canvas = document.createElement("canvas");
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return reject(new Error("Canvas 不可用"));
+      ctx.drawImage(img, 0, 0);
+      canvas.toBlob((pngBlob) => {
+        if (pngBlob) {
+          navigator.clipboard
+            .write([new ClipboardItem({ "image/png": pngBlob })])
+            .then(resolve)
+            .catch(reject);
+        } else {
+          reject(new Error("转 PNG 失败"));
+        }
+      }, "image/png");
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("图片加载失败"));
+    };
+    img.src = url;
+  });
+};
+
+const loadData = async () => {
+  state.loading = true;
+  state.errorMessage = "";
+  try {
+    const res = await baseService.get("/filescan/record/model");
+    const data = res.data as ModelFileGroupVO;
+    const items: FileItem[] = (data.file_list || []).map((file) => ({
+      type: file.type || "",
+      displayName: file.display_name || file.file_name || "",
+      fileId: String(file.file_id),
+      anchorId: `pred-${file.file_id}`
+    }));
+
+    state.fileItems = items;
+    state.selectedFileIndex = 0;
+
+    const preloads = items.filter((item) => isImageFile(item.type)).map((item) => loadBlobUrl(item.fileId));
+    if (items.length > 0) {
+      selectFile(0);
+    }
+    await Promise.allSettled(preloads);
+  } catch (error: any) {
+    state.errorMessage = error?.message || "加载模式预报文件失败";
+    state.fileItems = [];
+  } finally {
+    state.loading = false;
+  }
+};
+
+onUnmounted(() => {
+  Object.values(blobUrlCache).forEach((url) => URL.revokeObjectURL(url));
+});
+
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<style scoped>
+.mod-weather__prediction {
+  min-height: calc(100vh - 140px);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  color: #303133;
+}
+
+.page-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
+/* ==== 主体两栏 ==== */
+.page-body {
+  display: grid;
+  grid-template-columns: 25% minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+/* ==== 左侧文件列表 ==== */
+.file-list-panel {
+  position: sticky;
+  top: 16px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 4px;
+  max-height: calc(100vh - 220px);
+  overflow-y: auto;
+}
+
+.file-list-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  font-size: 13px;
+  color: #606266;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.file-list-item:hover {
+  background: #f5f7fa;
+}
+
+.file-list-item.is-active {
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  font-weight: 500;
+}
+
+.file-list-item__thumb {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #f0f2f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-list-item__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.file-list-item__icon {
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-list-item__icon--img {
+  background: var(--el-color-success);
+}
+
+.file-list-item__icon--other {
+  background: #c0c4cc;
+}
+
+.file-list-item__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.5;
+}
+
+/* ==== 右侧预览面板 ==== */
+.preview-panel {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+.preview-panel--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+.preview-panel__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.preview-panel__actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.preview-panel__title {
+  margin: 0;
+  font-size: 20px;
+  color: #303133;
+  word-break: break-all;
+}
+
+.preview-panel__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.preview-panel__loading {
+  text-align: center;
+  color: #909399;
+  padding: 60px 0;
+  font-size: 14px;
+}
+
+.preview-zoom-area {
+  overflow: hidden;
+  border-radius: 8px;
+  background: #f5f7fa;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-panel__img {
+  display: block;
+  max-width: 100%;
+  max-height: 60vh;
+  border-radius: 8px;
+  user-select: none;
+  pointer-events: auto;
+}
+
+/* ==== 响应式 ==== */
+@media (max-width: 992px) {
+  .page-body {
+    grid-template-columns: 1fr;
+  }
+
+  .file-list-panel {
+    position: static;
+    max-height: 200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header,
+  .preview-panel__header,
+  .preview-panel__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
diff --git a/src/views/weather/realtime-monitoring.vue b/src/views/weather/realtime-monitoring.vue
new file mode 100644
index 0000000..5c68178
--- /dev/null
+++ b/src/views/weather/realtime-monitoring.vue
@@ -0,0 +1,816 @@
+<template>
+  <div class="mod-weather__real-time-monitoring" v-loading="state.loading">
+    <div class="page-header">
+      <div>
+        <h2 class="page-title">气候实时监测</h2>
+      </div>
+      <div class="page-header-actions">
+        <el-tag type="info">层级 {{ state.selectedPath.length }} 级</el-tag>
+        <el-tag type="success">文件 {{ state.imageItems.length }}</el-tag>
+        <el-button type="primary" plain icon="Refresh" @click="refresh">刷新</el-button>
+      </div>
+    </div>
+
+    <el-alert v-if="state.errorMessage" :title="state.errorMessage" type="error" :closable="false" show-icon class="mb-16" />
+
+    <div class="dept-bar" v-if="levelRows.length">
+      <div class="level-row" v-for="(row, rowIdx) in levelRows" :key="rowIdx">
+        <span class="level-label" v-if="row.label">{{ row.label }}</span>
+        <div class="level-tabs">
+          <div v-for="tab in row.tabs" :key="tab.id" class="level-tab" :class="[{ 'is-active': row.selectedId === tab.id }, `level-${rowIdx}`]" @click="selectTab(rowIdx, tab)">
+            {{ tab.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="page-body" v-if="state.imageItems.length">
+      <aside class="file-list-panel">
+        <div v-for="(item, index) in state.imageItems" :key="item.anchorId" class="file-list-item" :class="{ 'is-active': state.selectedFileIndex === index }" @click="selectFile(index)">
+          <div class="file-list-item__thumb">
+            <img v-if="blobUrlCache[item.fileId]" :src="blobUrlCache[item.fileId]" class="file-list-item__img" />
+            <span v-else-if="isImageFile(item.type)" class="file-list-item__icon file-list-item__icon--img">图</span>
+            <span v-else-if="isTextFile(item.type)" class="file-list-item__icon file-list-item__icon--txt">文</span>
+            <span v-else class="file-list-item__icon file-list-item__icon--other">—</span>
+          </div>
+          <span class="file-list-item__name">{{ item.displayName || `文件-${item.fileId}` }}</span>
+        </div>
+      </aside>
+
+      <section class="preview-panel" v-if="previewItem">
+        <div class="preview-panel__header">
+          <h3 class="preview-panel__title">{{ previewItem.displayName || `文件-${previewItem.fileId}` }}</h3>
+          <div class="preview-panel__actions">
+            <el-button v-if="fileMode === 'image'" type="primary" plain size="small" :loading="state.copyingId === previewItem.anchorId" @click="copyImage(previewItem)"> 复制图片 </el-button>
+            <el-button v-else-if="fileMode === 'text'" type="primary" plain size="small" :loading="state.copyingId === previewItem.anchorId" @click="copyText(previewItem)"> 复制全部文本 </el-button>
+            <el-button v-if="fileMode === 'image'" type="success" plain size="small" @click="downloadFile(previewItem)"> 下载原图 </el-button>
+          </div>
+        </div>
+
+        <div class="preview-panel__body" v-if="fileMode === 'image'">
+          <div v-if="!previewBlobUrl && selectedFileId" class="preview-panel__loading">加载中...</div>
+          <div v-show="previewBlobUrl" class="preview-zoom-area" @wheel.prevent="onWheel" @mousedown="onPanStart" @dblclick="resetZoom">
+            <img :src="previewBlobUrl" :alt="previewItem.displayName" :style="zoomStyle" class="preview-panel__img" draggable="false" />
+          </div>
+          <div v-if="previewItem.content" class="preview-panel__text">{{ previewItem.content }}</div>
+        </div>
+
+        <div class="preview-panel__body" v-else-if="fileMode === 'text'">
+          <div class="preview-panel__text preview-panel__text--full">{{ previewItem.content || "暂无文本内容" }}</div>
+        </div>
+
+        <div class="preview-panel__body" v-else-if="fileMode === 'unsupported'">
+          <div class="image-card__unsupported">当前文件类型暂不支持预览</div>
+        </div>
+      </section>
+
+      <div class="preview-panel preview-panel--empty" v-else>
+        <el-empty description="请在左侧选择要预览的文件" :image-size="120" />
+      </div>
+    </div>
+
+    <el-empty v-else-if="!state.loading && !state.errorMessage" description="该部门暂无可展示图片" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import app from "@/constants/app";
+import { CacheToken } from "@/constants/cacheKey";
+import baseService from "@/service/baseService";
+import { getCache } from "@/utils/cache";
+import { copyToClipboard } from "@/utils/utils";
+import { ElMessage } from "element-plus";
+import axios from "axios";
+import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
+
+interface DeptNode {
+  id: string;
+  name: string;
+  children?: DeptNode[];
+}
+
+interface DeptTab {
+  id: string;
+  name: string;
+}
+
+interface DeptFileItemVO {
+  displayName: string;
+  fileId: string;
+  type: string;
+  content: string;
+}
+
+interface DeptFileGroupVO {
+  deptId: string;
+  deptName: string;
+  fileList: DeptFileItemVO[];
+}
+
+interface ImageItem {
+  deptId: string;
+  deptName: string;
+  displayName: string;
+  fileId: string;
+  type: string;
+  content: string;
+  anchorId: string;
+}
+
+const state = reactive({
+  loading: true,
+  errorMessage: "",
+  imageItems: [] as ImageItem[],
+  copyingId: "",
+  deptTreeData: [] as DeptNode[],
+  selectedPath: [] as string[],
+  selectedFileIndex: 0
+});
+
+const blobUrlCache = {} as Record<string, string>;
+const blobPromises = {} as Record<string, Promise<string> | undefined>;
+const previewBlobUrl = ref("");
+
+const loadBlobUrl = (fileId: string): Promise<string> => {
+  if (blobUrlCache[fileId]) return Promise.resolve(blobUrlCache[fileId]);
+  if (blobPromises[fileId]) return blobPromises[fileId];
+
+  const base = (app.api || "").replace(/\/$/, "");
+  const url = `${base}/filescan/file/display/${fileId}`;
+  const token = getCache(CacheToken, { isSessionStorage: true }, {})?.token;
+  const headers: Record<string, string> = {};
+  if (token) headers.token = token;
+
+  const promise = axios
+    .get(url, { responseType: "blob", headers })
+    .then((res) => {
+      const objectUrl = URL.createObjectURL(res.data as Blob);
+      blobUrlCache[fileId] = objectUrl;
+      return objectUrl;
+    })
+    .finally(() => {
+      delete blobPromises[fileId];
+    });
+
+  blobPromises[fileId] = promise;
+  return promise;
+};
+
+const activeDeptId = computed(() => {
+  if (state.selectedPath.length > 0) {
+    return state.selectedPath[state.selectedPath.length - 1];
+  }
+  return null;
+});
+
+interface LevelRow {
+  tabs: DeptTab[];
+  selectedId: string | null;
+  label: string;
+}
+
+const LEVEL_LABELS = ["一级", "二级", "三级", "四级", "五级", "六级"];
+
+const levelRows = computed<LevelRow[]>(() => {
+  const rows: LevelRow[] = [];
+  let nodes: DeptNode[] = state.deptTreeData;
+
+  for (let i = 0; i < state.selectedPath.length; i++) {
+    const selId = state.selectedPath[i];
+    rows.push({
+      tabs: nodes.map((n) => ({ id: n.id, name: n.name })),
+      selectedId: selId,
+      label: LEVEL_LABELS[i] || `${i + 1}级`
+    });
+    const selNode = nodes.find((n) => n.id === selId);
+    if (selNode?.children?.length) {
+      nodes = selNode.children;
+    } else {
+      nodes = [];
+      break;
+    }
+  }
+
+  if (nodes.length > 0) {
+    rows.push({
+      tabs: nodes.map((n) => ({ id: n.id, name: n.name })),
+      selectedId: null,
+      label: LEVEL_LABELS[rows.length] || `${rows.length + 1}级`
+    });
+  }
+
+  return rows;
+});
+
+const previewItem = computed(() => {
+  if (state.selectedFileIndex >= 0 && state.selectedFileIndex < state.imageItems.length) {
+    return state.imageItems[state.selectedFileIndex];
+  }
+  return state.imageItems.length > 0 ? state.imageItems[0] : null;
+});
+
+const IMAGE_EXTS = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg"];
+const TEXT_EXTS = ["txt", "md", "log", "csv", "json", "xml", "html", "htm", "yaml", "yml"];
+
+const isImageFile = (type: string) => {
+  if (!type) return true;
+  const lower = type.toLowerCase();
+  return IMAGE_EXTS.some((ext) => lower.includes(ext));
+};
+
+const isTextFile = (type: string) => {
+  if (!type) return false;
+  const lower = type.toLowerCase();
+  return TEXT_EXTS.some((ext) => lower.includes(ext));
+};
+
+const fileMode = computed(() => {
+  const item = previewItem.value;
+  if (!item) return "none";
+  if (isImageFile(item.type)) return "image";
+  if (isTextFile(item.type)) return "text";
+  return "unsupported";
+});
+
+const zoomScale = ref(1);
+const panX = ref(0);
+const panY = ref(0);
+const isPanning = ref(false);
+let panStartX = 0;
+let panStartY = 0;
+let panOriginX = 0;
+let panOriginY = 0;
+
+const zoomStyle = computed(() => ({
+  transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoomScale.value})`,
+  cursor: isPanning.value ? "grabbing" : "grab",
+  transition: isPanning.value ? "none" : "transform 0.15s ease"
+}));
+
+const resetZoom = () => {
+  zoomScale.value = 1;
+  panX.value = 0;
+  panY.value = 0;
+};
+
+const onWheel = (e: WheelEvent) => {
+  e.preventDefault();
+  const delta = e.deltaY > 0 ? -0.15 : 0.15;
+  const newScale = Math.max(0.2, Math.min(5, zoomScale.value + delta));
+  zoomScale.value = newScale;
+  if (newScale <= 1) {
+    panX.value = 0;
+    panY.value = 0;
+  }
+};
+
+const onPanStart = (e: MouseEvent) => {
+  if (zoomScale.value <= 1) return;
+  isPanning.value = true;
+  panStartX = e.clientX;
+  panStartY = e.clientY;
+  panOriginX = panX.value;
+  panOriginY = panY.value;
+  document.addEventListener("mousemove", onPanMove);
+  document.addEventListener("mouseup", onPanEnd);
+};
+
+const onPanMove = (e: MouseEvent) => {
+  if (!isPanning.value) return;
+  panX.value = panOriginX + (e.clientX - panStartX);
+  panY.value = panOriginY + (e.clientY - panStartY);
+};
+
+const onPanEnd = () => {
+  isPanning.value = false;
+  document.removeEventListener("mousemove", onPanMove);
+  document.removeEventListener("mouseup", onPanEnd);
+};
+
+const transformGroups = (list: DeptFileGroupVO[]) => {
+  const imageItems: ImageItem[] = [];
+
+  list.forEach((group) => {
+    (group.fileList || []).forEach((file) => {
+      imageItems.push({
+        deptId: group.deptId,
+        deptName: group.deptName,
+        displayName: file.displayName,
+        fileId: file.fileId,
+        type: file.type,
+        content: file.content || "",
+        anchorId: `img-${file.fileId}`
+      });
+    });
+  });
+
+  state.imageItems = imageItems;
+  state.selectedFileIndex = 0;
+};
+
+const loadData = async (deptId: string) => {
+  state.loading = true;
+  state.errorMessage = "";
+  try {
+    const res = await baseService.get("/filescan/record/tree", { deptId });
+    transformGroups((res.data || []) as DeptFileGroupVO[]);
+    const preloads = state.imageItems.filter((item) => isImageFile(item.type)).map((item) => loadBlobUrl(item.fileId));
+    selectFile(0);
+    await Promise.allSettled(preloads);
+  } catch (error: any) {
+    state.errorMessage = error?.message || "加载实时监测图片失败";
+    state.imageItems = [];
+  } finally {
+    state.loading = false;
+  }
+};
+
+const loadDeptTree = async (): Promise<string | null> => {
+  try {
+    const res = await baseService.get("/sys/dept/list");
+    const treeData = (res.data || []) as DeptNode[];
+    state.deptTreeData = treeData;
+
+    if (!treeData.length) return null;
+
+    const firstRoot = treeData[0];
+    const firstChild = firstRoot.children?.length ? firstRoot.children[0] : firstRoot;
+
+    const buildPath = (nodes: DeptNode[], targetId: string, path: string[]): string[] | null => {
+      for (const node of nodes) {
+        const newPath = [...path, node.id];
+        if (node.id === targetId) return newPath;
+        if (node.children?.length) {
+          const found = buildPath(node.children, targetId, newPath);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    const path = buildPath(treeData, firstChild.id, []);
+    state.selectedPath = path || [firstRoot.id];
+    return firstChild.id;
+  } catch {
+    state.deptTreeData = [];
+    return null;
+  }
+};
+
+const selectTab = (levelIdx: number, tab: DeptTab) => {
+  state.selectedPath = [...state.selectedPath.slice(0, levelIdx), tab.id];
+  state.imageItems = [];
+  state.selectedFileIndex = 0;
+  loadData(tab.id);
+};
+
+const refresh = () => {
+  if (activeDeptId.value !== null) {
+    loadData(activeDeptId.value);
+  }
+};
+
+const selectedFileId = ref("");
+
+const selectFile = async (index: number) => {
+  state.selectedFileIndex = index;
+  const item = state.imageItems[index];
+  if (!item) return;
+
+  selectedFileId.value = item.fileId;
+  resetZoom();
+
+  if (isImageFile(item.type)) {
+    previewBlobUrl.value = "";
+    const objectUrl = await loadBlobUrl(item.fileId);
+    previewBlobUrl.value = objectUrl;
+  } else {
+    previewBlobUrl.value = "";
+  }
+};
+
+const downloadFile = async (item: ImageItem) => {
+  const filename = item.displayName || `file-${item.fileId}`;
+  await loadBlobUrl(item.fileId);
+  const a = document.createElement("a");
+  a.href = blobUrlCache[item.fileId];
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+};
+
+const copyText = (item: ImageItem) => {
+  state.copyingId = item.anchorId;
+  copyToClipboard(item.content || "");
+  ElMessage.success("文本已复制成功");
+  state.copyingId = "";
+};
+
+const copyImage = async (item: ImageItem) => {
+  if (!isImageFile(item.type)) {
+    ElMessage.warning("当前文件不是图片类型，无法复制");
+    return;
+  }
+  state.copyingId = item.anchorId;
+  try {
+    await loadBlobUrl(item.fileId);
+    const blobUrl = blobUrlCache[item.fileId];
+    const res = await fetch(blobUrl);
+    const blob = await res.blob();
+    try {
+      await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+    } catch (e: any) {
+      if (e.name === "NotAllowedError" || e.message?.includes?.("not supported")) {
+        await convertToPngAndCopy(blob);
+      } else {
+        throw e;
+      }
+    }
+    ElMessage.success("图片已复制成功");
+  } catch (error: any) {
+    ElMessage.error(error?.message || "复制图片失败");
+  } finally {
+    state.copyingId = "";
+  }
+};
+
+const convertToPngAndCopy = (blob: Blob): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(blob);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      const canvas = document.createElement("canvas");
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return reject(new Error("Canvas 不可用"));
+      ctx.drawImage(img, 0, 0);
+      canvas.toBlob((pngBlob) => {
+        if (pngBlob) {
+          navigator.clipboard.write([new ClipboardItem({ "image/png": pngBlob })]).then(resolve).catch(reject);
+        } else {
+          reject(new Error("转 PNG 失败"));
+        }
+      }, "image/png");
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("图片加载失败"));
+    };
+    img.src = url;
+  });
+};
+
+onUnmounted(() => {
+  Object.values(blobUrlCache).forEach((url) => URL.revokeObjectURL(url));
+});
+
+onMounted(async () => {
+  const deptId = await loadDeptTree();
+  if (deptId !== null) {
+    loadData(deptId);
+  }
+});
+</script>
+
+<style scoped>
+.mod-weather__real-time-monitoring {
+  min-height: calc(100vh - 140px);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  color: #303133;
+}
+
+.page-desc {
+  margin: 8px 0 0;
+  color: #909399;
+  line-height: 1.6;
+}
+
+.page-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
+/* ==== 部门选择栏 ==== */
+.dept-bar {
+  margin-bottom: 16px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 10px 16px 8px;
+}
+
+.level-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.level-row:last-child {
+  margin-bottom: 4px;
+}
+
+.level-label {
+  font-size: 13px;
+  color: #909399;
+  flex-shrink: 0;
+  min-width: 32px;
+}
+
+.level-tabs {
+  display: flex;
+  gap: 0;
+  flex-wrap: wrap;
+}
+
+.level-tab {
+  padding: 4px 16px;
+  font-size: 13px;
+  color: #606266;
+  background: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.2s, background 0.2s, border-color 0.2s;
+}
+
+.level-tab + .level-tab {
+  margin-left: 6px;
+}
+
+.level-tab:hover {
+  color: var(--el-color-primary);
+  background: #ecf5ff;
+}
+
+.level-tab.is-active {
+  color: #fff;
+  font-weight: 500;
+}
+
+.level-tab.is-active.level-0 {
+  background: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+
+.level-tab.is-active.level-1 {
+  background: var(--el-color-primary-light-3);
+  border-color: var(--el-color-primary-light-3);
+}
+
+.level-tab.is-active.level-2 {
+  background: var(--el-color-success);
+  border-color: var(--el-color-success);
+}
+
+.level-tab.is-active.level-3 {
+  background: var(--el-color-warning);
+  border-color: var(--el-color-warning);
+}
+
+.level-tab.is-active.level-4 {
+  background: var(--el-color-danger);
+  border-color: var(--el-color-danger);
+}
+
+.level-tab.is-active.level-5 {
+  background: #8b5cf6;
+  border-color: #8b5cf6;
+}
+
+/* ==== 主体两栏 ==== */
+.page-body {
+  display: grid;
+  grid-template-columns: 25% minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+/* ==== 左侧文件列表 ==== */
+.file-list-panel {
+  position: sticky;
+  top: 16px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 4px;
+  max-height: calc(100vh - 320px);
+  overflow-y: auto;
+}
+
+.file-list-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  font-size: 13px;
+  color: #606266;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.file-list-item:hover {
+  background: #f5f7fa;
+}
+
+.file-list-item.is-active {
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  font-weight: 500;
+}
+
+.file-list-item__thumb {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #f0f2f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-list-item__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.file-list-item__icon {
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-list-item__icon--img {
+  background: var(--el-color-success);
+}
+
+.file-list-item__icon--txt {
+  background: var(--el-color-warning);
+}
+
+.file-list-item__icon--other {
+  background: #c0c4cc;
+}
+
+.file-list-item__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.5;
+}
+
+/* ==== 右侧预览面板 ==== */
+.preview-panel {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+.preview-panel--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+.preview-panel__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.preview-panel__actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.preview-panel__title {
+  margin: 0;
+  font-size: 20px;
+  color: #303133;
+  word-break: break-all;
+}
+
+.preview-panel__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.preview-panel__loading {
+  text-align: center;
+  color: #909399;
+  padding: 60px 0;
+  font-size: 14px;
+}
+
+.preview-zoom-area {
+  overflow: hidden;
+  border-radius: 8px;
+  background: #f5f7fa;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-panel__img {
+  display: block;
+  max-width: 100%;
+  max-height: 60vh;
+  border-radius: 8px;
+  user-select: none;
+  pointer-events: auto;
+}
+
+.preview-panel__text--full {
+  min-height: 200px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.preview-panel__text {
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 12px 14px;
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+.image-card__error,
+.image-card__unsupported {
+  color: #e6a23c;
+  font-size: 14px;
+  line-height: 1.6;
+  padding: 12px 14px;
+  background: #fdf6ec;
+  border-radius: 8px;
+}
+
+/* ==== 响应式 ==== */
+@media (max-width: 992px) {
+  .page-body {
+    grid-template-columns: 1fr;
+  }
+
+  .file-list-panel {
+    position: static;
+    max-height: 200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header,
+  .preview-panel__header,
+  .preview-panel__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .level-tab {
+    padding: 4px 10px;
+    font-size: 12px;
+  }
+}
+</style>