arms-app 1.0.77 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arms-app",
-  "version": "1.0.77",
+  "version": "1.0.78",
   "description": "一个基于 Express 的 Web 应用1",
   "main": "index.js",
   "scripts": {

package/view/5.d

@@ -0,0 +1,422 @@
+<template>
+  <el-dialog
+    title="发放"
+    :visible.sync="dialogVisible"
+    width="980px"
+    :close-on-click-modal="false"
+    @close="onClose"
+  >
+    <div class="issue-body">
+      <div class="issue-col">
+        <div class="issue-col-head">
+          <div class="issue-col-title">待选列表</div>
+          <div class="issue-col-count">
+            {{ issueLeftSelected.length }}/{{ issueLeftTotal }}
+          </div>
+        </div>
+        <el-input
+          v-model="issueLeftKeyword"
+          size="small"
+          placeholder="请输入"
+          clearable
+          prefix-icon="el-icon-search"
+          class="issue-search"
+        />
+        <el-table
+          ref="issueLeftTable"
+          :data="issueLeftPageRows"
+          border
+          stripe
+          size="small"
+          height="380"
+          @selection-change="onIssueLeftSelectionChange"
+        >
+          <el-table-column type="selection" width="46" />
+          <el-table-column label="人员">
+            <template slot-scope="scope">
+              {{ formatUserLabel(scope.row) }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="issue-pagination">
+          <el-pagination
+            small
+            :current-page="issueLeftPage"
+            :page-size="issueLeftPageSize"
+            layout="total, prev, pager, next"
+            :total="issueLeftTotal"
+            @current-change="onIssueLeftPageChange"
+          />
+        </div>
+      </div>
+
+      <div class="issue-transfer">
+        <el-button
+          size="mini"
+          type="primary"
+          :disabled="issueLeftSelected.length === 0"
+          @click="onIssueMoveToRight"
+        >
+          <i class="el-icon-arrow-right" />
+        </el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          :disabled="issueRightSelected.length === 0"
+          @click="onIssueMoveToLeft"
+        >
+          <i class="el-icon-arrow-left" />
+        </el-button>
+      </div>
+
+      <div class="issue-col">
+        <div class="issue-col-head">
+          <div class="issue-col-title">当前佩戴</div>
+          <div class="issue-col-count">
+            {{ issueSelectedUsers.length }}/{{ limitCount === -1 ? '不限' : limitCount }}
+          </div>
+        </div>
+        <el-input
+          v-model="issueRightKeyword"
+          size="small"
+          placeholder="请输入"
+          clearable
+          prefix-icon="el-icon-search"
+          class="issue-search"
+        />
+        <el-table
+          ref="issueRightTable"
+          :data="issueRightPageRows"
+          border
+          stripe
+          size="small"
+          height="380"
+          @selection-change="onIssueRightSelectionChange"
+        >
+          <el-table-column type="selection" width="46" />
+          <el-table-column label="人员">
+            <template slot-scope="scope">
+              {{ formatUserLabel(scope.row) }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="issue-pagination">
+          <el-pagination
+            small
+            :current-page="issueRightPage"
+            :page-size="issueRightPageSize"
+            layout="total, prev, pager, next"
+            :total="issueRightTotal"
+            @current-change="onIssueRightPageChange"
+          />
+        </div>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="small" @click="onCancel">取消</el-button>
+      <el-button size="small" type="primary" @click="onConfirm">
+        发放
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { get } from "../utils/request";
+
+/**
+ * 勋章发放弹窗组件
+ * 用于管理勋章的发放对象，支持左右穿梭框选择用户
+ */
+export default {
+  name: "MedalIssueDialog",
+  props: {
+    // 控制弹窗显示
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    limitCount: {
+      type: Number,
+      default: -1
+    },
+    // 当前操作的勋章对象
+    medal: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      issueUserPool: [], // 所有可用用户列表
+      issueSelectedUsers: [], // 当前勋章已选中的用户列表
+      issueLeftKeyword: "", // 左侧（待选）搜索关键字
+      issueRightKeyword: "", // 右侧（已选）搜索关键字
+      issueLeftPage: 1, // 左侧当前页码
+      issueRightPage: 1, // 右侧当前页码
+      issueLeftPageSize: 10, // 左侧每页显示数量
+      issueRightPageSize: 10, // 右侧每页显示数量
+      issueLeftSelected: [], // 左侧表格当前勾选的行（准备移入右侧）
+      issueRightSelected: [] // 右侧表格当前勾选的行（准备移出右侧）
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val);
+      }
+    },
+    // 左侧待选列表总数
+    issueLeftTotal() {
+      return this.issueLeftFiltered.length;
+    },
+    // 右侧已选列表总数
+    issueRightTotal() {
+      return this.issueRightFiltered.length;
+    },
+    // 左侧过滤后的列表（排除已选用户，并根据关键字过滤）
+    issueLeftFiltered() {
+      const selectedSet = new Set((this.issueSelectedUsers || []).map(u => u.userNo));
+      const keyword = (this.issueLeftKeyword || "").trim();
+      const pool = Array.isArray(this.issueUserPool) ? this.issueUserPool : [];
+      // 过滤掉已选中的用户
+      const list = pool.filter(u => !selectedSet.has(u.userNo));
+      if (!keyword) return list;
+      // 根据关键字过滤
+      return list.filter(u => this.formatUserLabel(u).includes(keyword));
+    },
+    // 右侧过滤后的列表（根据关键字过滤）
+    issueRightFiltered() {
+      const keyword = (this.issueRightKeyword || "").trim();
+      const list = Array.isArray(this.issueSelectedUsers) ? this.issueSelectedUsers : [];
+      if (!keyword) return list;
+      return list.filter(u => this.formatUserLabel(u).includes(keyword));
+    },
+    // 左侧当前页显示的数据
+    issueLeftPageRows() {
+      const start = (this.issueLeftPage - 1) * this.issueLeftPageSize;
+      return this.issueLeftFiltered.slice(start, start + this.issueLeftPageSize);
+    },
+    // 右侧当前页显示的数据
+    issueRightPageRows() {
+      const start = (this.issueRightPage - 1) * this.issueRightPageSize;
+      return this.issueRightFiltered.slice(start, start + this.issueRightPageSize);
+    }
+  },
+  watch: {
+    // 监听 visible 变化，为 true 时初始化数据
+    visible: {
+      handler(val) {
+        if (val) this.init();
+        console.log(this.medal)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /**
+     * 初始化数据
+     * 1. 确保用户池数据已加载
+     * 2. 根据服务端返回的已发放用户初始化选中状态
+     */
+    async init() {
+      const serverIssuedUsers = await this.ensureIssueUserPool();
+      const row = this.medal;
+      if (!row) return;
+
+      this.issueSelectedUsers = (serverIssuedUsers || []).map(u => ({ ...u }));
+
+      // 重置搜索和分页状态
+      this.issueLeftKeyword = "";
+      this.issueRightKeyword = "";
+      this.issueLeftPage = 1;
+      this.issueRightPage = 1;
+      this.issueLeftSelected = [];
+      this.issueRightSelected = [];
+      // 清空表格选中状态
+      this.$nextTick(() => {
+        this.$refs.issueLeftTable && this.$refs.issueLeftTable.clearSelection && this.$refs.issueLeftTable.clearSelection();
+        this.$refs.issueRightTable && this.$refs.issueRightTable.clearSelection && this.$refs.issueRightTable.clearSelection();
+      });
+    },
+    // 格式化用户显示名称 (姓名/工号)
+    formatUserLabel(user) {
+      if (!user) return "";
+      const name = user.displayName || "";
+      const no = user.userNo || "";
+      if (name && no) return `${name}/${no}`;
+      return name || no || "";
+    },
+    // 确保加载所有用户列表数据，并返回已发放用户
+    async ensureIssueUserPool() {
+      try {
+        const res = await get('/medal/users');
+        if (res) {
+          // 兼容新旧接口结构
+          if (res.allUsers) {
+            this.issueUserPool = res.allUsers;
+            return res.issuedUsers || [];
+          } else if (Array.isArray(res)) {
+            this.issueUserPool = res;
+            return [];
+          }
+        }
+      } catch (err) {
+        console.error(err);
+        this.$message.error('获取用户列表失败');
+      }
+      return [];
+    },
+    // 关闭弹窗时的处理
+    onClose() {
+      this.issueLeftSelected = [];
+      this.issueRightSelected = [];
+      this.$nextTick(() => {
+        this.$refs.issueLeftTable && this.$refs.issueLeftTable.clearSelection && this.$refs.issueLeftTable.clearSelection();
+        this.$refs.issueRightTable && this.$refs.issueRightTable.clearSelection && this.$refs.issueRightTable.clearSelection();
+      });
+      this.$emit('update:visible', false);
+    },
+    // 点击取消
+    onCancel() {
+      this.$emit('update:visible', false);
+    },
+    // 点击确定，校验并发射 confirm 事件
+    onConfirm() {
+      const medal = this.medal;
+      if (!medal) return;
+      const total = this.issueSelectedUsers.length;
+      // 校验限量勋章的数量限制
+      if (this.limitCount !== -1 && total > this.limitCount) {
+        this.$message({
+          type: "warning",
+          message: `超出发放数量上限（上限：${this.limitCount}）`
+        });
+        return;
+      }
+      
+      this.$emit('confirm', {
+        medal,
+        users: this.issueSelectedUsers
+      });
+    },
+    // 左侧表格选中变化
+    onIssueLeftSelectionChange(list) {
+      this.issueLeftSelected = Array.isArray(list) ? list.slice() : [];
+    },
+    // 右侧表格选中变化
+    onIssueRightSelectionChange(list) {
+      this.issueRightSelected = Array.isArray(list) ? list.slice() : [];
+    },
+    // 将左侧选中用户移动到右侧（添加）
+    onIssueMoveToRight() {
+      const selected = Array.isArray(this.issueLeftSelected) ? this.issueLeftSelected : [];
+      if (selected.length === 0) return;
+      
+      // 预先计算添加后的总数
+      const currentCount = this.issueSelectedUsers.length;
+      // 过滤掉已经在右侧的用户，计算实际新增数量
+      const existingIds = new Set(this.issueSelectedUsers.map(u => u.userNo));
+      const newUsers = selected.filter(u => !existingIds.has(u.userNo));
+      
+      if (this.limitCount !== -1 && (currentCount + newUsers.length) > this.limitCount) {
+        this.$message({
+          type: "warning",
+          message: `选择的用户数量超出限制（上限：${this.limitCount}，当前已选：${currentCount}，尝试添加：${newUsers.length}）`
+        });
+        return;
+      }
+
+      const map = new Map((this.issueSelectedUsers || []).map(u => [u.userNo, u]));
+      selected.forEach(u => {
+        if (!u || !u.userNo) return;
+        if (!map.has(u.userNo)) map.set(u.userNo, { ...u });
+      });
+      this.issueSelectedUsers = Array.from(map.values());
+      this.issueLeftSelected = [];
+      this.$nextTick(() => {
+        this.$refs.issueLeftTable && this.$refs.issueLeftTable.clearSelection && this.$refs.issueLeftTable.clearSelection();
+      });
+      // 调整分页如果当前页为空
+      const maxPage = Math.max(1, Math.ceil(this.issueLeftTotal / this.issueLeftPageSize));
+      if (this.issueLeftPage > maxPage) this.issueLeftPage = maxPage;
+    },
+    // 将右侧选中用户移动到左侧（移除）
+    onIssueMoveToLeft() {
+      const selected = Array.isArray(this.issueRightSelected) ? this.issueRightSelected : [];
+      if (selected.length === 0) return;
+      const removeSet = new Set(selected.map(u => u.userNo));
+      this.issueSelectedUsers = (this.issueSelectedUsers || []).filter(u => !removeSet.has(u.userNo));
+      this.issueRightSelected = [];
+      this.$nextTick(() => {
+        this.$refs.issueRightTable && this.$refs.issueRightTable.clearSelection && this.$refs.issueRightTable.clearSelection();
+      });
+      // 调整分页
+      const maxPage = Math.max(1, Math.ceil(this.issueRightTotal / this.issueRightPageSize));
+      if (this.issueRightPage > maxPage) this.issueRightPage = maxPage;
+    },
+    // 左侧分页变化
+    onIssueLeftPageChange(page) {
+      this.issueLeftPage = page;
+      this.issueLeftSelected = [];
+      this.$nextTick(() => {
+        this.$refs.issueLeftTable && this.$refs.issueLeftTable.clearSelection && this.$refs.issueLeftTable.clearSelection();
+      });
+    },
+    // 右侧分页变化
+    onIssueRightPageChange(page) {
+      this.issueRightPage = page;
+      this.issueRightSelected = [];
+      this.$nextTick(() => {
+        this.$refs.issueRightTable && this.$refs.issueRightTable.clearSelection && this.$refs.issueRightTable.clearSelection();
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.issue-body {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.issue-col {
+  flex: 1;
+  min-width: 0;
+}
+.issue-col-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.issue-col-title {
+  font-size: 14px;
+  color: #303133;
+}
+.issue-col-count {
+  font-size: 13px;
+  color: #909399;
+}
+.issue-search {
+  margin-bottom: 10px;
+}
+.issue-transfer {
+  width: 72px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+.issue-pagination {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+}
+</style>

package/view/2.d

@@ -1,531 +0,0 @@
-<template>
-  <div class="page">
-    <!-- 年份选择工具栏，切换不同年份的趋势数据 -->
-    <div class="toolbar">
-      <el-select v-model="selectedYear" size="small" @change="onYearChange('hand')">
-        <el-option v-for="y in yearOptions" :key="y" :label="y + '年'" :value="y" />
-      </el-select>
-      <el-select v-model="selectedDate" size="small" style="margin-left:8px" @change="onDateChange('hand')">
-        <el-option v-for="d in xAxis" :key="d" :label="d" :value="d" />
-      </el-select>
-      <!-- 当前视图最后一条数据展示区 -->
-      <div class="info">
-        <span>最后数据：</span>
-        <strong>{{ lastLabel || '-' }}</strong>
-        <span>值：</span>
-        <strong>{{ lastValue === null ? '-' : lastValue }}</strong>
-      </div>
-    </div>
-
-    <!-- 折线图容器 -->
-    <div ref="chartRef" class="chart"></div>
-  </div>
-</template>
-
-<script>
-// 使用 ECharts 绘制折线图
-import * as echarts from 'echarts'
-// 调用后端接口获取指定年份的每日趋势数据
-import { getTrend } from '../api/mock'
-
-export default {
-  name: 'LineChartPage',
-  data() {
-    return {
-      /**
-       * ECharts 图表实例对象
-       * 用于执行 setOption、resize、dispose 等操作
-       */
-      chartInstance: null,
-
-      /**
-       * 当前选中的年份
-       * 初始化默认为当前系统年份
-       */
-      selectedYear: new Date().getFullYear(),
-
-      /**
-       * 可选年份列表
-       * 用于下拉框筛选数据，目前静态配置了 2020-2026 年
-       */
-      yearOptions: [2020, 2021, 2022, 2023, 2024, 2025, 2026],
-
-      /**
-       * 固定视口宽度（单位：天）
-       * 核心配置项：决定了图表中一次性展示多少天的数据
-       * 配合 dataZoom 事件逻辑，强制保持视窗大小不变，仅允许左右平移
-       */
-      windowSize: 31,
-
-      /**
-       * 数据总点数
-       * 即 xAxis/series 数组的长度，用于计算 dataZoom 的百分比与索引映射
-       * 在 loadData/extendLeft/extendRight 时会更新此值
-       */
-      totalPoints: 0,
-
-      /**
-       * 当前视窗的数据区间状态
-       * @property {number} startValue - 视窗起始数据索引（包含）
-       * @property {number} endValue - 视窗结束数据索引（包含）
-       * 始终满足：endValue = startValue + windowSize - 1
-       * 用于在 slider（底部滑块）和 inside（鼠标拖拽）两种交互模式间同步状态
-       */
-      dataZoomState: { startValue: 0, endValue: 30 },
-
-      /**
-       * x轴数据缓存（日期字符串数组）
-       * 格式示例：['2023-01-01', '2023-01-02', ...]
-       * 会随着左右滑动触发的数据动态加载（拼接）而增长
-       */
-      xAxis: [],
-
-      /**
-       * y轴数据缓存（数值数组）
-       * 与 xAxis 一一对应
-       */
-      series: [],
-
-      /**
-       * 当前选中的具体日期
-       * 对应顶部日期下拉框的值，与图表视窗联动
-       */
-      selectedDate: '',
-      isExtendingRight: false,
-
-      /**
-       * 视窗最右侧（最新）数据的日期标签
-       * 用于顶部“最后数据”展示区
-       */
-      lastLabel: '',
-
-      /**
-       * 视窗最右侧（最新）数据的数值
-       * 用于顶部“最后数据”展示区
-       */
-      lastValue: null
-    }
-  },
-  watch: {
-    lastLabel(newVal) {
-      if (newVal) {
-        this.selectedYear = parseInt(newVal.slice(0, 4))
-        this.selectedDate = newVal
-      }
-    }
-  },
-  mounted() {
-    // 初始化时拉取默认年份的数据
-    // 判断当前年份的天数是否已经满足31天。如果不满足需要请求前一年的数据和当前年份数据合并
-    this.loadData()
-    window.addEventListener('resize', this.handleResize)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.handleResize)
-    if (this.chartInstance) {
-      this.chartInstance.dispose()
-      this.chartInstance = null
-    }
-  },
-  methods: {
-    // 拉取指定年份的趋势数据，并初始化图表（含初次拼接相邻年份）
-    async loadData(year = this.selectedYear) {
-      const merged = await this.assembleInitialData(year)
-      const x = merged.map(i => i.label)
-      const y = merged.map(i => i.value)
-      this.xAxis = x
-      this.series = y
-      this.initChart(x, y, year)
-      this.selectedDate = x.length ? x[x.length - 1] : ''
-    },
-    // 年份变化时重新加载数据
-    onYearChange(type) {
-      if (type === 'hand') {
-        if (this.chartInstance) {
-          this.chartInstance.dispose()
-          this.chartInstance = null
-        }
-        this.xAxis = []
-        this.series = []
-        this.totalPoints = 0
-        this.dataZoomState = { startValue: 0, endValue: this.windowSize - 1 }
-        this.lastLabel = ''
-        this.lastValue = null
-        this.loadData(this.selectedYear)
-      }
-
-    },
-    /**
-     * 初始化图表并应用固定 31 天视口窗口
-     *
-     * 参数说明：
-     * @param {string[]} xAxisData - 全年每日的类目轴标签数组，按天排列。
-     *   - 期望格式：YYYY-MM-DD（显示时可能裁剪为 MM-DD 以提升密度）
-     *   - 长度：与 seriesData 等长
-     * @param {number[]} seriesData - 与 xAxisData 一一对应的数值数据序列。
-     *   - 每个元素代表对应日期的数值
-     *   - 长度：与 xAxisData 等长
-     * @param {number} year - 当前选择的年份，用于设置图表标题与语义。
-     *
-     * 行为与步骤：
-     * 1) 销毁已有 ECharts 实例（若存在），避免内存泄漏与配置残留
-     * 2) 初始化新实例，并记录数据总长度 totalPoints
-     * 3) 设置初始 dataZoomState 区间为 [0, windowSize-1]，窗口宽度固定为 31 天
-     * 4) 构建并设置 option：
-     *    - title/tooltip：基本信息与提示
-     *    - grid：为密集标签与滑块预留空间
-     *    - dataZoom：包含 slider 与 inside，开启 zoomLock，禁止缩放，仅允许平移
-     *    - xAxis/yAxis：类目轴与数值轴，xAxis 的标签密度与格式已优化
-     *    - series：折线图数据（平滑）
-     * 5) 绑定 dataZoom 事件：根据用户拖动自动维持窗口固定宽度，并做边界约束
-     * 6) 调用 updateLastViewPoint：更新顶部“最后数据”展示（日期与值）
-     *
-     * 前置条件：
-     * - xAxisData.length === seriesData.length
-     * - windowSize <= xAxisData.length
-     *
-     * 副作用：
-     * - 更新 this.chartInstance / this.totalPoints / this.dataZoomState
-     * - 更新 lastLabel / lastValue（顶部展示区）
-     *
-     * 返回值：无（void）
-     */
-    // 初始化图表：根据所选年份定位初始视口结束位置，并绑定固定窗口 dataZoom 行为
-    initChart(xAxisData, seriesData, year) {
-      if (this.chartInstance) {
-        this.chartInstance.dispose()
-      }
-
-      this.chartInstance = echarts.init(this.$refs.chartRef)
-      this.totalPoints = xAxisData.length
-      let initialEnd = this.computeInitialWindowEnd(xAxisData, year)
-      const initialStart = Math.max(0, initialEnd - (this.windowSize - 1))
-      this.dataZoomState = { startValue: initialStart, endValue: initialEnd }
-
-      const option = {
-        // title: {
-        //   text: year + ' 年每日趋势'
-        // },
-        tooltip: {
-          trigger: 'axis'
-        },
-        grid: { left: 60, right: 60, bottom: 80, top: 60, containLabel: true },
-        // 仅在视口内展示 31 天数据，可通过底部滑动条左右滑动查看全年
-        // slider：底部可视化拖动条；inside：鼠标滚轮/手势缩放
-        // 通过 startValue/endValue 控制初始显示区间（0-30 共 31 天）
-        dataZoom: [
-          {
-            type: 'slider',                 // 底部滑块式数据缩放控件
-            zoomLock: true,                 // 锁定缩放，仅允许平移窗口
-            startValue: this.dataZoomState.startValue, // 初始窗口起始索引
-            endValue: this.dataZoomState.endValue      // 初始窗口结束索引
-          },
-          {
-            type: 'inside',                 // 内置交互式 dataZoom（滚轮/触摸）
-            zoomLock: true,                 // 锁定缩放，仅允许平移
-            zoomOnMouseWheel: false,        // 禁止滚轮缩放
-            moveOnMouseWheel: true,         // 允许滚轮左右平移视口
-            zoomOnPinch: false,             // 禁止触摸捏合缩放
-            startValue: this.dataZoomState.startValue, // 初始窗口起始索引（与 slider 同步）
-            endValue: this.dataZoomState.endValue      // 初始窗口结束索引（与 slider 同步）
-          }
-        ],
-        xAxis: {                             // 横轴：类目轴（日期）
-          type: 'category',                  // 使用类目轴
-          data: xAxisData,                   // 横轴数据（日期列表）
-          axisLabel: {                       // 坐标轴标签样式
-            interval: 0,                     // 强制显示所有标签
-            rotate: 45,                      // 标签旋转 45 度，避免重叠
-            fontSize: 10,                    // 标签字体大小
-            margin: 6,                       // 标签与轴线间距
-            showMinLabel: true,              // 显示首个标签
-            showMaxLabel: true,              // 显示最后一个标签
-            formatter: function (value) {    // 标签文本格式化
-              return typeof value === 'string' && value.length >= 10 ? value.slice(5) : value // 长日期仅保留“MM-DD”
-            }
-          }
-        },
-        yAxis: {                             // 纵轴：数值轴
-          type: 'value'                      // 数值类型
-        },
-        series: [
-          {
-            name: '值',                      // 序列名称
-            type: 'line',                    // 折线图
-            smooth: true,                    // 使用平滑曲线
-            showSymbol: true,
-            label: {
-              show: true,
-              position: 'top',
-              formatter: function (params) {
-                return params.value
-              }
-            },
-            data: seriesData                 // 序列数据
-          }
-        ]
-      }
-
-      this.chartInstance.setOption(option)
-
-      this.chartInstance.off('dataZoom')
-      this.chartInstance.on('dataZoom', async (params) => {
-        // 固定窗口宽度的核心逻辑：
-        // 1. 将 dataZoom 回调中的百分比或显式索引统一转换为 start/end 索引
-        // 2. 判断用户是“移动 start”还是“移动 end”，相应地调整另一端保持 windowSize 不变
-        // 3. 做边界约束，确保 0 <= start <= end <= totalPoints - 1
-        // 4. 若区间有变化，使用 dispatchAction 同步两个 dataZoom（slider 与 inside），silent 避免死循环
-        const raw = Array.isArray(params.batch) && params.batch.length ? params.batch[0] : params
-        const startPercent = typeof raw.start === 'number' ? raw.start : 0
-        const endPercentDefault = (this.dataZoomState.endValue / (this.totalPoints - 1)) * 100
-        const endPercent = typeof raw.end === 'number' ? raw.end : endPercentDefault
-        let start = Number.isFinite(raw.startValue)
-          ? raw.startValue
-          : Math.round((startPercent / 100) * (this.totalPoints - 1))
-        let end = Number.isFinite(raw.endValue)
-          ? raw.endValue
-          : Math.round((endPercent / 100) * (this.totalPoints - 1))
-
-        const prev = this.dataZoomState
-        const movedStart = Math.abs(start - prev.startValue)
-        const movedEnd = Math.abs(end - prev.endValue)
-
-        if (movedStart >= movedEnd) {
-          end = start + (this.windowSize - 1)
-        } else {
-          start = end - (this.windowSize - 1)
-        }
-
-        if (end > this.totalPoints - 1) {
-          end = this.totalPoints - 1
-          start = end - (this.windowSize - 1)
-        }
-        if (start < 0) {
-          start = 0
-          end = start + (this.windowSize - 1)
-        }
-
-        // 触达左边界时尝试向左扩展（不小于 yearOptions[0]）
-        const leftRes = await this.extendLeftIfNeeded(start, end)
-        start = leftRes.start
-        end = leftRes.end
-
-        // 触达右边界时尝试向右扩展（不超过“今天”）
-        const rightRes = await this.extendRightIfNeeded(start, end)
-        start = rightRes.start
-        end = rightRes.end
-
-        if (start !== prev.startValue || end !== prev.endValue) {
-          this.dataZoomState = { startValue: start, endValue: end }
-          this.chartInstance.dispatchAction({
-            type: 'dataZoom',
-            dataZoomIndex: 0,
-            startValue: start,
-            endValue: end,
-            silent: true
-          })
-          this.chartInstance.dispatchAction({
-            type: 'dataZoom',
-            dataZoomIndex: 1,
-            startValue: start,
-            endValue: end,
-            silent: true
-          })
-        }
-        this.updateLastViewPoint()
-      })
-      this.updateLastViewPoint()
-    },
-    // 计算 YYYY-MM-DD 的“今天”标签（UTC）
-    todayLabel() {
-      const now = new Date()
-      const y = now.getUTCFullYear()
-      const m = String(now.getUTCMonth() + 1).padStart(2, '0')
-      const d = String(now.getUTCDate()).padStart(2, '0')
-      return `${y}-${m}-${d}`
-    },
-    // 初次加载时的合并策略：
-    // - 选择小于当前年的年份：合并下一年全年，支持右滑
-    // - 选择当前年：若不足 windowSize，则拼接上一年填满窗口
-    async assembleInitialData(year) {
-      const nowYear = new Date().getFullYear()
-      const list = await getTrend(year)
-      if (year < nowYear) {
-        const next = await getTrend(year + 1)
-        const nextAll = Array.isArray(next) ? next : []
-        return [...list, ...nextAll]
-      }
-      if (year === nowYear && Array.isArray(list) && list.length < this.windowSize) {
-        const prev = await getTrend(year - 1)
-        const prevAll = Array.isArray(prev) ? prev : []
-        return [...prevAll, ...list]
-      }
-      return list
-    },
-    // 计算初始视口结束索引：若选择非当前年，则落在该年的最后一天或最后一个该年数据点
-    computeInitialWindowEnd(xAxisData, year) {
-      let end = Math.max(0, xAxisData.length - 1)
-      const nowYear = new Date().getFullYear()
-      if (year < nowYear) {
-        const target = `${year}-12-31`
-        let idx = xAxisData.lastIndexOf(target)
-        if (idx === -1) {
-          for (let i = xAxisData.length - 1; i >= 0; i--) {
-            const v = xAxisData[i]
-            if (typeof v === 'string' && v.slice(0, 4) === String(year)) {
-              idx = i
-              break
-            }
-          }
-        }
-        if (idx !== -1) end = idx
-      }
-      return end
-    },
-    // 扩展左侧：在起点触达时，将更早年份数据前置拼接，并保持窗口位置不变
-    async extendLeftIfNeeded(start, end) {
-      const minYear = Array.isArray(this.yearOptions) && this.yearOptions.length ? this.yearOptions[0] : 1970
-      if (start > 0 || !Array.isArray(this.xAxis) || this.xAxis.length === 0) return { start, end }
-      const firstLabel = this.xAxis[0]
-      const firstYear = this.parseYear(firstLabel)
-      if (!Number.isFinite(firstYear) || firstYear <= minYear) return { start, end }
-      const prevData = await getTrend(firstYear - 1)
-      const prevLen = Array.isArray(prevData) ? prevData.length : 0
-      if (prevLen <= 0) return { start, end }
-      const prevX = prevData.map(i => i.label)
-      const prevY = prevData.map(i => i.value)
-      this.appendData(prevX, prevY, 'left')
-      return { start: start + prevLen, end: end + prevLen }
-    },
-    // 扩展右侧：在末尾触达时，按需追加下一年或当前年剩余（不超过“今天”）
-    async extendRightIfNeeded(start, end) {
-      if (end < this.totalPoints - 1 || !Array.isArray(this.xAxis) || this.xAxis.length === 0) return { start, end }
-      if (this.isExtendingRight) return { start, end }
-      this.isExtendingRight = true
-      const nowYear = new Date().getFullYear()
-      const lastLabel = this.xAxis[this.xAxis.length - 1]
-      const lastYear = this.parseYear(lastLabel)
-      const today = this.todayLabel()
-      if (!this.canGrowRight(lastYear, lastLabel, nowYear, today)) { this.isExtendingRight = false; return { start, end } }
-      try {
-        const targetYear = Number.isFinite(lastYear) && lastYear < nowYear ? lastYear + 1 : nowYear
-        const nextData = await getTrend(targetYear)
-        const filtered = this.filterNewer(nextData, lastLabel, today)
-        if (filtered.length <= 0) return { start, end }
-        const nextX = filtered.map(i => i.label)
-        const nextY = filtered.map(i => i.value)
-        this.appendData(nextX, nextY, 'right')
-        return { start, end }
-      } finally {
-        this.isExtendingRight = false
-      }
-    },
-    // 解析日期字符串中的年份
-    parseYear(label) {
-      return typeof label === 'string' ? parseInt(label.slice(0, 4), 10) : NaN
-    },
-    // 判断是否还可以向右加载更多数据
-    // 条件：最后一条数据的年份小于当前年，或者同年但日期小于今天
-    canGrowRight(lastYear, lastLabel, nowYear, today) {
-      return (Number.isFinite(lastYear) && lastYear < nowYear) ||
-        (Number.isFinite(lastYear) && lastYear === nowYear && typeof lastLabel === 'string' && lastLabel < today)
-    },
-    // 过滤出新加载数据中，晚于当前视图最后一条且早于等于今天的数据
-    filterNewer(data, lastLabel, today) {
-      return Array.isArray(data) ? data.filter(i => i.label > lastLabel && i.label <= today) : []
-    },
-    // 将新数据拼接到现有数据序列中（左侧或右侧），并更新图表
-    appendData(nextX, nextY, direction) {
-      if (direction === 'left') {
-        this.xAxis = [...nextX, ...this.xAxis]
-        this.series = [...nextY, ...this.series]
-      } else {
-        this.xAxis = [...this.xAxis, ...nextX]
-        this.series = [...this.series, ...nextY]
-      }
-      this.totalPoints = this.xAxis.length
-      this.chartInstance.setOption({
-        xAxis: { data: this.xAxis },
-        series: [{ data: this.series }]
-      })
-    },
-    // 日期下拉框变更时的处理逻辑：定位视窗到选定日期
-    onDateChange(type) {
-      if (!type || type !== 'hand') {
-        return
-      }
-      const idx = this.xAxis.indexOf(this.selectedDate)
-      if (idx === -1) return
-      let end = idx
-      let start = end - (this.windowSize - 1)
-      if (start < 0) {
-        start = 0
-        end = start + (this.windowSize - 1)
-      }
-      if (end > this.totalPoints - 1) {
-        end = this.totalPoints - 1
-        start = end - (this.windowSize - 1)
-      }
-      this.dataZoomState = { startValue: start, endValue: end }
-      this.chartInstance.dispatchAction({
-        type: 'dataZoom',
-        dataZoomIndex: 0,
-        startValue: start,
-        endValue: end,
-        silent: true
-      })
-      this.chartInstance.dispatchAction({
-        type: 'dataZoom',
-        dataZoomIndex: 1,
-        startValue: start,
-        endValue: end,
-        silent: true
-      })
-      this.updateLastViewPoint()
-    },
-    // 根据当前窗口区间更新顶部最后一条数据展示
-    updateLastViewPoint() {
-      const end = this.dataZoomState.endValue
-      if (Array.isArray(this.xAxis) && Array.isArray(this.series) && end >= 0 && end < this.series.length) {
-        this.lastLabel = this.xAxis[end]
-        this.lastValue = this.series[end]
-      } else {
-        this.lastLabel = ''
-        this.lastValue = null
-      }
-    },
-    // 窗口尺寸变更时自适应
-    handleResize() {
-      if (this.chartInstance) {
-        this.chartInstance.resize()
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.page {
-  padding: 24px;
-}
-
-.toolbar {
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-}
-
-.title {
-  margin-bottom: 16px;
-}
-
-.info {
-  font-size: 14px;
-  margin-left: 12px;
-}
-
-.chart {
-  width: 100%;
-  height: 400px;
-}
-</style>