n20-common-lib 3.1.4 → 3.1.6

package/src/components/Pivot/ConfigSidebar.vue

@@ -0,0 +1,518 @@
+<template>
+  <!-- 右侧维度配置 -->
+  <div class="pivot-sidebar-right" :class="{ collapsed: isCollapsed }">
+    <div class="sidebar-header">
+      <template v-if="!isCollapsed">
+        <i class="v3-icon-move-right sidebar-header-collapse" @click="handleToggleCollapse"></i>
+        <span class="sidebar-title">维度配置</span>
+      </template>
+    </div>
+    <div class="config-form">
+      <!-- 报表标题 -->
+      <div class="form-item">
+        <label class="form-label">报表标题</label>
+        <el-input :value="reportName" size="small" placeholder="请输入报表名称" @input="handleNameChange" />
+      </div>
+
+      <!-- 统计类型 -->
+      <div class="form-item">
+        <label class="form-label">统计类型</label>
+        <div class="radio-group">
+          <ViewToggle
+            :value="statType"
+            :itemWidth="120"
+            :options="statTypeOptions"
+            @change="handleStatTypeChange"
+          />
+        </div>
+      </div>
+
+      <!-- 展示形式 - 仅分组统计 + 图表视图时显示 -->
+      <div v-if="!isCrossMode && viewMode === 'chart'" class="form-item">
+        <label class="form-label">展示形式</label>
+        <div
+          class="select-wrapper"
+          :class="{ active: showChartTypeDropdown }"
+          @click="showChartTypeDropdown = !showChartTypeDropdown"
+        >
+          <div class="select-value">
+            <i :class="getChartTypeIcon(chartType)" class="report-icon"></i>
+            <span>{{ getChartTypeLabel(chartType) }}</span>
+          </div>
+          <svg class="select-arrow" width="10" height="10" viewBox="0 0 10 10" fill="none">
+            <path
+              d="M2 3L5 7L8 3"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <div v-if="showChartTypeDropdown" class="dropdown-menu chart-type-dropdown">
+            <div
+              v-for="type in chartTypes"
+              :key="type.value"
+              class="dropdown-item chart-type-item"
+              :class="{ active: chartType === type.value }"
+              @click.stop="handleChartTypeChange(type.value)"
+            >
+              <i :class="getChartTypeIcon(type.value)" class="report-icon"></i>
+              <span>{{ type.label }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-divider"></div>
+
+      <!-- 分组维度 - 仅分组统计显示，单选 -->
+      <div v-if="!isCrossMode" class="form-item">
+        <label class="form-label">
+          分组维度
+          <el-tooltip content="选择维度字段作为分组依据" placement="top">
+            <i class="v3-icon-help"></i>
+          </el-tooltip>
+        </label>
+        <div
+          class="select-wrapper"
+          :class="{ active: showDimensionDropdown }"
+          @click="showDimensionDropdown = !showDimensionDropdown"
+        >
+          <div class="select-value">
+            <span v-if="!selectedDimension" class="placeholder">请选择</span>
+            <span v-else>{{ getDimensionLabel(selectedDimension) }}</span>
+          </div>
+          <svg class="select-arrow" width="10" height="10" viewBox="0 0 10 10" fill="none">
+            <path
+              d="M2 3L5 7L8 3"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <div v-if="showDimensionDropdown" class="dropdown-menu dimension-dropdown">
+            <div
+              v-for="dim in availableDimensions"
+              :key="dim.prop"
+              class="dropdown-item"
+              :class="{ active: selectedDimension === dim.prop }"
+              @click.stop="handleDimensionSelect(dim.prop)"
+            >
+              <span>{{ dim.label }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 行维度 - 仅交叉统计显示 -->
+      <div v-if="isCrossMode" class="form-item">
+        <label class="form-label">
+          行维度
+          <el-tooltip content="选择维度字段作为行分组依据" placement="top">
+            <i class="v3-icon-help"></i>
+          </el-tooltip>
+        </label>
+        <div
+          class="select-wrapper"
+          :class="{ active: showRowDimensionDropdown }"
+          @click="showRowDimensionDropdown = !showRowDimensionDropdown"
+        >
+          <div class="select-value">
+            <span v-if="!rowDimension" class="placeholder">请选择</span>
+            <span v-else>{{ getDimensionLabel(rowDimension) }}</span>
+          </div>
+          <svg class="select-arrow" width="10" height="10" viewBox="0 0 10 10" fill="none">
+            <path
+              d="M2 3L5 7L8 3"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <div v-if="showRowDimensionDropdown" class="dropdown-menu dimension-dropdown">
+            <div
+              v-for="dim in availableDimensions"
+              :key="dim.prop"
+              class="dropdown-item"
+              :class="{ active: rowDimension === dim.prop }"
+              @click.stop="handleRowDimensionChange(dim.prop)"
+            >
+              <span>{{ dim.label }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="isCrossMode" class="form-divider"></div>
+
+      <!-- 列维度 - 仅交叉统计显示 -->
+      <div v-if="isCrossMode" class="form-item">
+        <label class="form-label">
+          列维度
+          <el-tooltip content="选择维度字段作为列分组依据" placement="top">
+            <i class="v3-icon-help"></i>
+          </el-tooltip>
+        </label>
+        <div
+          class="select-wrapper"
+          :class="{ active: showColumnDimensionDropdown }"
+          @click="showColumnDimensionDropdown = !showColumnDimensionDropdown"
+        >
+          <div class="select-value">
+            <span v-if="!columnDimension" class="placeholder">请选择</span>
+            <span v-else>{{ getDimensionLabel(columnDimension) }}</span>
+          </div>
+          <svg class="select-arrow" width="10" height="10" viewBox="0 0 10 10" fill="none">
+            <path
+              d="M2 3L5 7L8 3"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <div v-if="showColumnDimensionDropdown" class="dropdown-menu dimension-dropdown">
+            <div
+              v-for="dim in availableDimensions"
+              :key="dim.prop"
+              class="dropdown-item"
+              :class="{ active: columnDimension === dim.prop }"
+              @click.stop="handleColumnDimensionChange(dim.prop)"
+            >
+              <span>{{ dim.label }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-divider"></div>
+
+      <!-- 计算指标 -->
+      <div class="form-item">
+        <div class="form-label-row">
+          <div class="form-label-group">
+            <label class="form-label">
+              计算指标
+              <el-tooltip content="选择数值字段作为计算指标，支持多种聚合方式" placement="top">
+                <i class="v3-icon-help"></i>
+              </el-tooltip>
+            </label>
+          </div>
+          <div class="aggregate-dropdown" @click="showAggregateDropdown = !showAggregateDropdown">
+            <span>自定义</span>
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+              <path
+                d="M2 3L5 7L8 3"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <div v-if="showAggregateDropdown" class="dropdown-menu aggregate-dropdown-menu">
+              <div
+                v-for="agg in aggregateTypes"
+                :key="agg.value"
+                class="dropdown-item"
+                :class="{ active: globalAggregateType === agg.value }"
+                @click.stop="handleGlobalAggregateChange(agg.value)"
+              >
+                {{ agg.label }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 已选指标行列表 -->
+        <div class="metric-rows">
+          <div
+            v-for="metric in metrics"
+            :key="metric.prop"
+            class="metric-row"
+            :class="{ active: activeMetricKey === metric.prop }"
+          >
+            <div class="metric-select-box">
+              <div class="metric-select-value">{{ getMetricLabel(metric.prop) }}</div>
+              <div class="metric-select-tag" @click.stop="handleToggleMetricAggregate(metric.prop)">
+                {{ getAggregateLabel(metric.aggregateType) }}
+              </div>
+            </div>
+            <div class="metric-delete-btn" @click="handleRemoveMetric(metric.prop)">
+              <i class="v3-icon-delete"></i>
+            </div>
+            <!-- 单个指标聚合类型下拉 -->
+            <div v-if="activeMetricKey === metric.prop" class="dropdown-menu metric-aggregate-dropdown">
+              <div
+                v-for="agg in aggregateTypes"
+                :key="agg.value"
+                class="dropdown-item"
+                :class="{ active: metric.aggregateType === agg.value }"
+                @click.stop="handleMetricAggregateChange(metric.prop, agg.value)"
+              >
+                {{ agg.label }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="add-field-btn" @click="showMetricAddDropdown = !showMetricAddDropdown">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <path d="M7 1V13M1 7H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          </svg>
+          <span>添加字段</span>
+          <!-- 添加字段下拉 -->
+          <div v-if="showMetricAddDropdown" class="dropdown-menu metric-add-dropdown">
+            <div
+              v-for="metric in availableMetricsForAdd"
+              :key="metric.prop"
+              class="dropdown-item"
+              @click.stop="handleAddMetric(metric.prop)"
+            >
+              {{ metric.label }}
+            </div>
+            <div v-if="availableMetricsForAdd.length === 0" class="dropdown-item disabled">无可用字段</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ViewToggle from '../ViewToggle/index.vue'
+
+export default {
+  name: 'ConfigSidebar',
+  components: {
+    ViewToggle
+  },
+  props: {
+    // 是否折叠
+    isCollapsed: {
+      type: Boolean,
+      default: false
+    },
+    // 报表名称
+    reportName: {
+      type: String,
+      default: ''
+    },
+    // 统计类型
+    statType: {
+      type: String,
+      default: 'group'
+    },
+    // 统计类型选项
+    statTypeOptions: {
+      type: Array,
+      default: () => []
+    },
+    // 图表类型
+    chartType: {
+      type: String,
+      default: 'bar'
+    },
+    // 图表类型选项
+    chartTypes: {
+      type: Array,
+      default: () => []
+    },
+    // 是否交叉统计模式
+    isCrossMode: {
+      type: Boolean,
+      default: false
+    },
+    // 视图模式（chart/table）
+    viewMode: {
+      type: String,
+      default: 'chart'
+    },
+    // 分组维度（单选）
+    selectedDimension: {
+      type: String,
+      default: null
+    },
+    // 行维度
+    rowDimension: {
+      type: String,
+      default: null
+    },
+    // 列维度
+    columnDimension: {
+      type: String,
+      default: null
+    },
+    // 指标列表
+    metrics: {
+      type: Array,
+      default: () => []
+    },
+    // 可用维度
+    availableDimensions: {
+      type: Array,
+      default: () => []
+    },
+    // 可添加的指标
+    availableMetricsForAdd: {
+      type: Array,
+      default: () => []
+    },
+    // 所有可用指标（用于显示标签）
+    availableMetrics: {
+      type: Array,
+      default: () => []
+    },
+    // 全局聚合类型
+    globalAggregateType: {
+      type: String,
+      default: 'sum'
+    },
+    // 聚合类型选项
+    aggregateTypes: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showChartTypeDropdown: false,
+      showDimensionDropdown: false,
+      showRowDimensionDropdown: false,
+      showColumnDimensionDropdown: false,
+      showAggregateDropdown: false,
+      showMetricAddDropdown: false,
+      activeMetricKey: null
+    }
+  },
+  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'
+    },
+
+    // 获取图表类型标签
+    getChartTypeLabel(type) {
+      const chart = this.chartTypes.find((t) => t.value === type)
+      return chart ? chart.label : '柱状图'
+    },
+
+    // 获取维度标签
+    getDimensionLabel(dimKey) {
+      const dim = this.availableDimensions.find((d) => d.prop === dimKey)
+      return dim ? dim.label : dimKey
+    },
+
+    // 获取维度标签列表
+    getDimensionLabels(dimKeys) {
+      return dimKeys.map((k) => this.getDimensionLabel(k)).join(', ')
+    },
+
+    // 获取指标标签
+    getMetricLabel(metricProp) {
+      // 优先从所有可用指标中查找
+      const metric = this.availableMetrics.find((m) => m.prop === metricProp)
+      if (metric) return metric.label
+      // 其次从可添加指标中查找
+      const metricForAdd = this.availableMetricsForAdd.find((m) => m.prop === metricProp)
+      if (metricForAdd) return metricForAdd.label
+      // 最后返回 prop
+      return metricProp
+    },
+
+    // 获取聚合类型标签
+    getAggregateLabel(type) {
+      const agg = this.aggregateTypes.find((t) => t.value === type)
+      return agg ? agg.label : '求和'
+    },
+
+    // 切换折叠状态
+    handleToggleCollapse() {
+      this.$emit('toggle-collapse')
+    },
+
+    // 报表名称变更
+    handleNameChange(value) {
+      this.$emit('name-change', value)
+    },
+
+    // 统计类型变更
+    handleStatTypeChange(type) {
+      this.$emit('stat-type-change', type)
+    },
+
+    // 图表类型变更
+    handleChartTypeChange(type) {
+      this.showChartTypeDropdown = false
+      this.$emit('chart-type-change', type)
+    },
+
+    // 分组维度选择（单选）
+    handleDimensionSelect(dimKey) {
+      this.showDimensionDropdown = false
+      this.$emit('dimension-select', dimKey)
+    },
+
+    // 行维度变更
+    handleRowDimensionChange(dimKey) {
+      this.showRowDimensionDropdown = false
+      this.$emit('row-dimension-change', dimKey)
+    },
+
+    // 列维度变更
+    handleColumnDimensionChange(dimKey) {
+      this.showColumnDimensionDropdown = false
+      this.$emit('column-dimension-change', dimKey)
+    },
+
+    // 切换单个指标聚合类型下拉
+    handleToggleMetricAggregate(metricProp) {
+      this.activeMetricKey = this.activeMetricKey === metricProp ? null : metricProp
+    },
+
+    // 修改单个指标的聚合类型
+    handleMetricAggregateChange(metricProp, aggregateType) {
+      this.activeMetricKey = null
+      this.$emit('metric-aggregate-change', { prop: metricProp, aggregateType })
+    },
+
+    // 全局聚合类型变更
+    handleGlobalAggregateChange(type) {
+      this.showAggregateDropdown = false
+      this.$emit('global-aggregate-change', type)
+    },
+
+    // 添加指标
+    handleAddMetric(metricProp) {
+      this.showMetricAddDropdown = false
+      this.$emit('add-metric', metricProp)
+    },
+
+    // 删除指标
+    handleRemoveMetric(metricProp) {
+      if (this.activeMetricKey === metricProp) {
+        this.activeMetricKey = null
+      }
+      this.$emit('remove-metric', metricProp)
+    },
+
+    // 关闭所有下拉菜单（供外部调用）
+    closeAllDropdowns() {
+      this.showChartTypeDropdown = false
+      this.showDimensionDropdown = false
+      this.showRowDimensionDropdown = false
+      this.showColumnDimensionDropdown = false
+      this.showAggregateDropdown = false
+      this.showMetricAddDropdown = false
+      this.activeMetricKey = null
+    }
+  }
+}
+</script>

package/src/components/Pivot/MainToolbar.vue

@@ -0,0 +1,160 @@
+<template>
+  <!-- 内容头部工具栏 -->
+  <div class="main-toolbar">
+    <div class="toolbar-left">
+      <div class="toolbar-left-top">
+        <h2 class="report-title">{{ reportName }}</h2>
+        <div class="add-to-home-btn" @click="handleAddToHome">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <path
+              d="M5.8335 7.58496C6.1554 7.58514 6.41633 7.84606 6.4165 8.16797V12.252C6.41615 12.5737 6.1553 12.8348 5.8335 12.835H1.74951C1.42771 12.8348 1.16686 12.5737 1.1665 12.252V8.16797C1.16668 7.84606 1.4276 7.58514 1.74951 7.58496H5.8335ZM10.7915 9.62598H12.5415V10.793H10.7915V12.543H9.62451V10.793H7.87451V9.62598H9.62451V7.87598H10.7915V9.62598ZM2.3335 11.668H5.24951V8.75195H2.3335V11.668ZM5.8335 1.16797C6.1554 1.16814 6.41633 1.42907 6.4165 1.75098V5.83496C6.41633 6.15687 6.1554 6.41779 5.8335 6.41797H1.74951C1.4276 6.41779 1.16668 6.15687 1.1665 5.83496V1.75098C1.16668 1.42907 1.4276 1.16814 1.74951 1.16797H5.8335ZM12.2505 1.16797C12.5722 1.16832 12.8333 1.42918 12.8335 1.75098V5.83496C12.8333 6.15676 12.5722 6.41762 12.2505 6.41797H8.1665C7.8446 6.41779 7.58367 6.15687 7.5835 5.83496V1.75098C7.58367 1.42907 7.8446 1.16814 8.1665 1.16797H12.2505ZM2.3335 5.25098H5.24951V2.33496H2.3335V5.25098ZM8.75049 5.25098H11.6665V2.33496H8.75049V5.25098Z"
+              fill="#007AFF"
+            />
+          </svg>
+          <span>添加到首页</span>
+        </div>
+      </div>
+      <div class="report-stats">
+        <span class="stat-item">计算耗时：{{ calculateTime }} ms</span>
+        <span class="stat-divider"></span>
+        <span class="stat-item">数据条数：{{ dataCount }}</span>
+      </div>
+    </div>
+
+    <div class="toolbar-right">
+      <ViewToggle
+        v-model="viewMode"
+        :options="viewModeOptions"
+        :disabled="isCrossMode"
+        @change="handleViewModeChange"
+      />
+      <span class="toolbar-divider"></span>
+      <div class="action-buttons">
+        <div class="action-btn" @click="handleRefresh" title="刷新">
+          <i class="n20-icon-shuaxin"></i>
+        </div>
+        <div class="action-btn more-btn" :class="{ active: showMoreMenu }" @click="toggleMoreMenu" title="更多">
+          <i class="v3-icon-more"></i>
+          <div v-if="showMoreMenu" class="more-dropdown-menu" @click.stop>
+            <div v-if="isRightSidebarCollapsed" class="dropdown-menu-item" @click="handleConfig">
+              <i class="v3-icon-setting"></i>
+              <span>配置</span>
+            </div>
+            <div class="dropdown-menu-item" @click="handleAddToHome">
+              <i class="v3-icon-add-menu"></i>
+              <span>添加到首页</span>
+            </div>
+            <div class="dropdown-menu-item" @click="handleExport">
+              <i class="v3-icon-upload"></i>
+              <span>导出</span>
+            </div>
+            <div class="dropdown-divider"></div>
+            <div class="dropdown-menu-item danger" @click.stop="handleDeleteReport">
+              <i class="v3-icon-delete"></i>
+              <span>删除</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ViewToggle from '../ViewToggle/index.vue'
+
+export default {
+  name: 'MainToolbar',
+  components: {
+    ViewToggle
+  },
+  props: {
+    // 报表名称
+    reportName: {
+      type: String,
+      default: ''
+    },
+    // 计算耗时
+    calculateTime: {
+      type: Number,
+      default: 0
+    },
+    // 数据条数
+    dataCount: {
+      type: Number,
+      default: 0
+    },
+    // 视图模式
+    viewMode: {
+      type: String,
+      default: 'chart'
+    },
+    // 视图模式选项
+    viewModeOptions: {
+      type: Array,
+      default: () => []
+    },
+    // 是否交叉统计模式
+    isCrossMode: {
+      type: Boolean,
+      default: false
+    },
+    // 右侧边栏是否折叠
+    isRightSidebarCollapsed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showMoreMenu: false
+    }
+  },
+  methods: {
+    // 切换更多菜单显示
+    toggleMoreMenu() {
+      this.showMoreMenu = !this.showMoreMenu
+    },
+
+    // 处理视图模式切换
+    handleViewModeChange(val) {
+      this.$emit('view-mode-change', val)
+    },
+
+    // 刷新数据
+    handleRefresh() {
+      this.showMoreMenu = false
+      this.$emit('refresh')
+    },
+
+    // 配置
+    handleConfig() {
+      this.showMoreMenu = false
+      this.$emit('config')
+    },
+
+    // 导出数据
+    handleExport() {
+      this.showMoreMenu = false
+      this.$emit('export')
+    },
+
+    // 添加到首页
+    handleAddToHome() {
+      this.showMoreMenu = false
+      this.$emit('add-to-home')
+    },
+
+    // 删除报表
+    handleDeleteReport() {
+      this.showMoreMenu = false
+      this.$emit('delete-report')
+    },
+
+    // 关闭菜单（供外部调用）
+    closeMenu() {
+      this.showMoreMenu = false
+    }
+  }
+}
+</script>