n20-common-lib 3.1.4 → 3.1.5

package/src/components/Pivot/ReportSidebar.vue

@@ -0,0 +1,172 @@
+<template>
+  <!-- 左侧报表清单 -->
+  <div class="pivot-sidebar-left" :class="{ collapsed: isCollapsed }">
+    <div class="sidebar-header">
+      <span class="sidebar-title">我的报表清单</span>
+      <div class="add-report-btn" @click="handleAddReport" title="新建">
+        <i class="v3-icon-plus"></i>
+      </div>
+    </div>
+
+    <div class="report-list">
+      <div
+        v-for="(report, index) in reportList"
+        :key="report.id"
+        class="report-item"
+        :class="{ active: currentIndex === index, editing: editingId === report.id }"
+        @click="handleSelectReport(index)"
+        @mouseenter="hoveredId = report.id"
+        @mouseleave="hoveredId = null"
+      >
+        <i :class="getChartTypeIcon(report.chartType)" class="report-icon"></i>
+        <!-- 报表名称显示/编辑 -->
+        <span v-if="editingId !== report.id" class="report-name">{{ report.name }}</span>
+        <input
+          v-else
+          v-model="editingName"
+          class="report-name-input"
+          type="text"
+          @click.stop
+          @blur="handleSaveRename"
+          @keyup.enter="handleSaveRename"
+          @keyup.esc="handleCancelRename"
+        />
+        <!-- 更多操作菜单 -->
+        <div
+          v-if="editingId !== report.id"
+          class="report-more"
+          :class="{ visible: hoveredId === report.id || activeMenuId === report.id }"
+          @click.stop="handleToggleMenu(report.id)"
+        >
+          <i class="v3-icon-more"></i>
+          <div v-if="activeMenuId === report.id" class="report-menu">
+            <div class="report-menu-item" @click.stop="handleStartRename(report)">
+              <i class="v3-icon-edit"></i>
+              <span>重命名</span>
+            </div>
+            <div class="report-menu-item delete" @click.stop="handleDeleteReport(report)">
+              <i class="v3-icon-delete"></i>
+              <span>删除</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 折叠/展开指示器 -->
+    <div
+      class="scroll-bar-indicator"
+      :class="{ collapsed: isCollapsed }"
+      @click="handleToggleCollapse"
+    >
+      <i :class="isCollapsed ? 'v3-icon-right' : 'v3-icon-left'"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ReportSidebar',
+  props: {
+    // 报表列表
+    reportList: {
+      type: Array,
+      default: () => []
+    },
+    // 当前选中的报表索引
+    currentIndex: {
+      type: Number,
+      default: 0
+    },
+    // 是否折叠
+    isCollapsed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 报表项悬停ID
+      hoveredId: null,
+      // 当前显示菜单的报表ID
+      activeMenuId: null,
+      // 正在编辑的报表ID
+      editingId: null,
+      // 编辑中的报表名称
+      editingName: ''
+    }
+  },
+  methods: {
+    // 获取图表类型图标
+    getChartTypeIcon(type) {
+      const iconMap = {
+        bar: 'v3-icon-chart-histogram',
+        line: 'v3-icon-chart-line',
+        pie: 'v3-icon-chart-pie',
+        horizontalBar: 'v3-icon-histogram'
+      }
+      return iconMap[type] || 'v3-icon-chart-histogram'
+    },
+
+    // 选择报表
+    handleSelectReport(index) {
+      this.$emit('select', index)
+    },
+
+    // 添加报表
+    handleAddReport() {
+      this.$emit('add')
+    },
+
+    // 切换折叠状态
+    handleToggleCollapse() {
+      this.$emit('toggle-collapse')
+    },
+
+    // 切换报表菜单显示
+    handleToggleMenu(reportId) {
+      this.activeMenuId = this.activeMenuId === reportId ? null : reportId
+    },
+
+    // 开始重命名
+    handleStartRename(report) {
+      this.editingId = report.id
+      this.editingName = report.name
+      this.activeMenuId = null
+      this.$nextTick(() => {
+        const input = this.$el.querySelector('.report-name-input')
+        if (input) {
+          input.focus()
+          input.select()
+        }
+      })
+    },
+
+    // 保存重命名
+    handleSaveRename() {
+      if (this.editingId && this.editingName.trim()) {
+        this.$emit('rename', { id: this.editingId, name: this.editingName.trim() })
+      }
+      this.editingId = null
+      this.editingName = ''
+    },
+
+    // 取消重命名
+    handleCancelRename() {
+      this.editingId = null
+      this.editingName = ''
+    },
+
+    // 删除报表
+    handleDeleteReport(report) {
+      this.activeMenuId = null
+      this.$emit('delete', report)
+    },
+
+    // 关闭菜单（供外部调用）
+    closeMenu() {
+      this.activeMenuId = null
+    }
+  }
+}
+</script>

package/src/components/Pivot/TableView.vue

@@ -0,0 +1,263 @@
+<template>
+  <!-- 表格视图 -->
+  <div class="table-view">
+    <div v-if="hasData" class="table-wrapper">
+      <!-- 数据概览头部 -->
+      <div class="table-header">
+        <div class="table-title">数据概览</div>
+        <div class="table-desc">按维度「{{ dimensionLabel }}」聚合后的结果，共 {{ dataCount }} 条</div>
+      </div>
+
+      <!-- 分组统计表格 -->
+      <template v-if="!isCrossMode">
+        <div class="table-container">
+          <table class="pivot-table">
+            <thead>
+              <tr>
+                <th
+                  v-for="col in tableColumns"
+                  :key="col.key"
+                  :class="col.type === 'metric' ? 'metric-header' : 'dimension-header'"
+                  :style="col.width ? { width: col.width } : null"
+                >
+                  {{ col.title }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, index) in tableData" :key="index">
+                <td
+                  v-for="col in tableColumns"
+                  :key="col.key"
+                  :class="col.type === 'metric' ? 'metric-cell' : 'dimension-cell'"
+                  :style="col.width ? { width: col.width } : null"
+                >
+                  <template v-if="col.type === 'metric'">
+                    <div class="cell-content">
+                      <span v-if="col.aggregateType === 'count'" class="cell-count"
+                        >{{ formatCount(row._groupCount) }} 笔</span
+                      >
+                      <span v-else class="cell-value">{{ formatNumber(row[col.key]) }}</span>
+                    </div>
+                  </template>
+                  <template v-else>
+                    {{ row[col.key] }}
+                  </template>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+
+      <!-- 交叉统计表格 -->
+      <template v-else>
+        <div class="cross-table-container">
+          <table class="cross-pivot-table">
+            <thead>
+              <!-- 主表头行 -->
+              <tr class="cross-header-row">
+                <!-- 显示第一个维度列 -->
+                <th class="cross-dimension-header">
+                  {{ crossTableColumns.find((c) => c.type === 'dimension')?.title }}
+                </th>
+                <!-- 指标列 -->
+                <th
+                  v-for="col in crossTableColumns.filter((c) => c.type === 'metric')"
+                  :key="'header-' + col.key"
+                  class="cross-metric-header"
+                >
+                  {{ col.title }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, index) in tableData" :key="index" class="cross-data-row">
+                <!-- 第一个维度值 -->
+                <td class="cross-dimension-cell">
+                  {{ row[crossTableColumns.find((c) => c.type === 'dimension')?.key] }}
+                </td>
+                <!-- 指标列 -->
+                <td
+                  v-for="col in crossTableColumns.filter((c) => c.type === 'metric')"
+                  :key="'cell-' + row._groupKey + '-' + col.key"
+                  class="cross-metric-cell"
+                >
+                  <span v-if="col.aggregateType === 'count'" class="cross-metric-count"
+                    >{{ formatCount(row._groupCount) }} 笔</span
+                  >
+                  <span v-else class="cross-metric-value">{{ formatNumber(row[col.key]) }}</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+
+      <!-- 分页组件 -->
+      <div class="cross-pagination">
+        <div class="pagination-info">共{{ totalCount }}条</div>
+        <div class="pagination-controls">
+          <div class="pagination-btn" :class="{ disabled: currentPage <= 1 }" @click="handlePrevPage">
+            <i class="v3-icon-left"></i>
+          </div>
+          <div class="pagination-current">{{ currentPage }}</div>
+          <span class="pagination-separator">/</span>
+          <div class="pagination-total">{{ totalPages }}</div>
+          <div class="pagination-btn" :class="{ disabled: currentPage >= totalPages }" @click="handleNextPage">
+            <i class="v3-icon-right"></i>
+          </div>
+        </div>
+        <div class="pagination-size-select" @click="showPageSizeDropdown = !showPageSizeDropdown">
+          <span>{{ pageSize }}条/页</span>
+          <i class="v3-icon-down"></i>
+          <div v-if="showPageSizeDropdown" class="pagination-size-dropdown">
+            <div
+              v-for="size in pageSizeOptions"
+              :key="size"
+              class="pagination-size-option"
+              :class="{ active: pageSize === size }"
+              @click.stop="handlePageSizeChange(size)"
+            >
+              {{ size }}条/页
+            </div>
+          </div>
+        </div>
+        <div class="pagination-jump">
+          <span class="pagination-jump-label">前往</span>
+          <input type="number" class="pagination-jump-input" :value="currentPage" @change="handleJumpToPage" min="1" />
+          <span class="pagination-jump-label">页</span>
+        </div>
+      </div>
+    </div>
+    <div v-else class="empty-state">
+      <Empty type="noData2" :height="200" :width="200" content="暂无数据" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Empty from '../Empty/index.vue'
+
+export default {
+  name: 'TableView',
+  components: {
+    Empty
+  },
+  props: {
+    // 是否有数据
+    hasData: {
+      type: Boolean,
+      default: false
+    },
+    // 数据条数
+    dataCount: {
+      type: Number,
+      default: 0
+    },
+    // 维度标签
+    dimensionLabel: {
+      type: String,
+      default: ''
+    },
+    // 是否交叉统计模式
+    isCrossMode: {
+      type: Boolean,
+      default: false
+    },
+    // 表格列定义
+    tableColumns: {
+      type: Array,
+      default: () => []
+    },
+    // 交叉表列定义
+    crossTableColumns: {
+      type: Array,
+      default: () => []
+    },
+    // 分页后的表格数据
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    // 总数据条数
+    totalCount: {
+      type: Number,
+      default: 0
+    },
+    // 当前页
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    // 每页条数
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    // 每页条数选项
+    pageSizeOptions: {
+      type: Array,
+      default: () => [10, 20, 50, 100]
+    },
+    // 总页数
+    totalPages: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      showPageSizeDropdown: false
+    }
+  },
+  methods: {
+    // 格式化数值显示
+    formatNumber(val) {
+      if (val === null || val === undefined || val === '') return '--'
+      const num = parseFloat(val)
+      if (isNaN(num)) return '--'
+      return num.toLocaleString('en-US', { minimumFractionDigits: 2 })
+    },
+
+    // 格式化笔数显示（0 显示为 "-"，其他显示数字）
+    formatCount(count) {
+      if (count === null || count === undefined || count === 0) return '-'
+      return count
+    },
+
+    // 上一页
+    handlePrevPage() {
+      if (this.currentPage > 1) {
+        this.$emit('prev-page')
+      }
+    },
+
+    // 下一页
+    handleNextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.$emit('next-page')
+      }
+    },
+
+    // 跳转到指定页
+    handleJumpToPage(e) {
+      const page = parseInt(e.target.value)
+      if (page && page >= 1 && page <= this.totalPages) {
+        this.$emit('jump-page', page)
+      }
+    },
+
+    // 每页条数变更
+    handlePageSizeChange(size) {
+      this.showPageSizeDropdown = false
+      this.$emit('page-size-change', size)
+    },
+
+    // 关闭下拉菜单（供外部调用）
+    closeDropdown() {
+      this.showPageSizeDropdown = false
+    }
+  }
+}
+</script>