n20-common-lib 3.1.11 → 3.1.13

package/src/components/Pivot/index.vue

@@ -113,17 +113,41 @@
 </template>
 
 <script>
-import XEUtils from 'xe-utils'
-import Dialog from '../Dialog/index.vue'
-import ReportSidebar from './ReportSidebar.vue'
-import MainToolbar from './MainToolbar.vue'
+import XEUtils, { merge } from 'xe-utils'
+
 import ChartView from './ChartView.vue'
-import TableView from './TableView.vue'
 import ConfigSidebar from './ConfigSidebar.vue'
+import MainToolbar from './MainToolbar.vue'
+import ReportSidebar from './ReportSidebar.vue'
+import TableView from './TableView.vue'
+
+import Dialog from '../Dialog/index.vue'
 
 const STORAGE_KEY = 'pivot_report_configs'
 const DEBOUNCE_DELAY = 300
 
+// 图表配色（从 CSS 变量读取）
+const CHARTS_COLORS_KEYS = [
+  '--charts-blue',
+  '--charts-teal',
+  '--charts-red',
+  '--charts-orange',
+  '--charts-warn',
+  '--charts-yellow',
+  '--charts-bright-yellow',
+  '--charts-lime',
+  '--charts-green',
+  '--charts-light-blue',
+  '--charts-purple',
+  '--charts-magenta',
+  '--charts-pink'
+]
+const CHARTS_COLORS = CHARTS_COLORS_KEYS.map((key) => getCSSVariableValue(key))
+
+function getCSSVariableValue(key) {
+  return getComputedStyle(document.documentElement).getPropertyValue(key).trim()
+}
+
 // 防抖函数
 function debounce(func, wait) {
   let timeout
@@ -217,8 +241,7 @@ export default {
       chartTypes: [
         { value: 'bar', label: '柱状图' },
         { value: 'line', label: '折线图' },
-        { value: 'pie', label: '饼图' },
-        { value: 'horizontalBar', label: '条形图' }
+        { value: 'pie', label: '饼图' }
       ],
       // 聚合类型选项
       aggregateTypes: [
@@ -522,9 +545,7 @@ export default {
 
       // 获取列维度的唯一值，使用 getEnumDisplayValue 处理枚举和对象类型
       const uniqueColumnValues = [
-        ...new Set(
-          this.actualData.map((item) => this.getEnumDisplayValue(item, columnDimension))
-        )
+        ...new Set(this.actualData.map((item) => this.getEnumDisplayValue(item, columnDimension)))
       ]
 
       // 如果有多个指标，使用多级表头结构
@@ -635,40 +656,149 @@ export default {
       const gridConfig = {
         left: '3%',
         right: '4%',
-        bottom: '15%',
+        bottom: '0',
         top: '10%',
         containLabel: true
       }
+      const tooltip = {
+        backgroundColor: '#fff',
+        borderColor: '#e5e6eb',
+        borderWidth: 1,
+        padding: [12, 12],
+        textStyle: {
+          color: '#1d2129'
+        },
+        extraCssText: 'box-shadow: 0px 8px 10px rgba(0,0,0,0.1); border-radius: 4px;',
+        formatter: (params) => {
+          if (params.seriesType === 'pie') {
+            let html = `<div style="font-size:14px;font-weight:500;margin-bottom:8px;color:#1d2129;">${params.marker}${params.name}</div>`
+            const rowData = this.processedData[params.dataIndex] || {}
+            const groupCount = rowData._groupCount || 0
+            const value =
+              typeof params.value === 'number'
+                ? params.value.toLocaleString('en-US', { minimumFractionDigits: 2 })
+                : params.value
+            html += `<div style="display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:4px;">`
+            html += `<div style="display:flex;align-items:center;gap:8px;">`
+            html += `<span style="font-size:12px;color:#1d2129;font-weight:600;font-family:'Open Sans',sans-serif;">${value}</span>`
+            html += `<span style="font-size:12px;color:#4e5969;font-family:'PingFang SC',sans-serif;">${groupCount} 笔</span>`
+            html += `</div>`
+            html += `</div>`
+
+            return html
+          }
+          const title = params[0].axisValue
+          const dataIndex = params[0].dataIndex
+          const rowData = this.processedData[dataIndex] || {}
+          const groupCount = rowData._groupCount || 0
+          let html = `<div style="font-size:14px;font-weight:500;margin-bottom:8px;color:#1d2129;">${title}</div>`
+          params.forEach((p) => {
+            const color = p.color
+            const value =
+              typeof p.value === 'number' ? p.value.toLocaleString('en-US', { minimumFractionDigits: 2 }) : p.value
+            html += `<div style="display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:4px;">`
+            html += `<div style="display:flex;align-items:center;gap:4px;">`
+            html += `<span style="display:inline-block;width:8px;height:3px;background:${color};"></span>`
+            html += `<span style="font-size:12px;color:#4e5969;font-family:'PingFang SC',sans-serif;">${p.seriesName}</span>`
+            html += `</div>`
+            html += `<div style="display:flex;align-items:center;gap:8px;">`
+            html += `<span style="font-size:12px;color:#1d2129;font-weight:600;font-family:'Open Sans',sans-serif;">${value}</span>`
+            html += `<span style="font-size:12px;color:#4e5969;font-family:'PingFang SC',sans-serif;">${groupCount} 笔</span>`
+            html += `</div>`
+            html += `</div>`
+          })
+          return html
+        }
+      }
 
       if (chartType === 'pie') {
         const metricProp = metrics[0]?.prop || ''
         const metricCol = this.columns.find((c) => c.prop === metricProp)
         const metricName = metricCol ? metricCol.label : metricProp
+        const total = data.reduce((sum, row) => sum + (Number(row[metricProp]) || 0), 0)
 
         return {
-          tooltip: {
-            trigger: 'item',
-            formatter: '{b}: {c} ({d}%)'
-          },
-          legend: {
-            orient: 'horizontal',
-            bottom: 10,
-            left: 'center'
-          },
+          color: CHARTS_COLORS,
+          tooltip: merge(tooltip, {
+            trigger: 'item'
+          }),
+          legend: false,
+          graphic: [
+            {
+              type: 'group',
+              left: 'center',
+              top: 'center',
+              children: [
+                {
+                  type: 'text',
+                  style: {
+                    text: '总计',
+                    textAlign: 'center',
+                    fill: getCSSVariableValue('--color-text-regular'),
+                    fontSize: 13,
+                    lineHeight: 22,
+                    fontWeight: 400
+                  },
+                  top: 0
+                },
+                {
+                  type: 'text',
+                  style: {
+                    text: total.toLocaleString(),
+                    textAlign: 'center',
+                    fill: getCSSVariableValue('--color-text-primary'),
+                    fontSize: 20,
+                    lineHeight: 28,
+                    fontWeight: 600
+                  },
+                  top: 20
+                }
+              ]
+            }
+          ],
           series: [
             {
               name: metricName,
               type: 'pie',
               radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 4,
-                borderColor: '#fff',
-                borderWidth: 2
-              },
+              center: ['50%', '50%'],
+              avoidLabelOverlap: true,
               label: {
                 show: true,
-                formatter: '{b}: {d}%'
+                position: 'outside',
+                edgeDistance: 10,
+                formatter: function (params) {
+                  const value = Number(params.value).toLocaleString('zh-CN')
+                  return ['{name|' + params.name + '}', '{value|' + value + '}'].join('\n')
+                },
+                rich: {
+                  name: {
+                    fontSize: 12,
+                    color: '#86909c',
+                    lineHeight: 20
+                  },
+                  value: {
+                    fontSize: 16,
+                    color: '#1d2129',
+                    fontWeight: 600,
+                    fontFamily: 'Open Sans',
+                    lineHeight: 24
+                  }
+                }
+              },
+              labelLine: {
+                show: true,
+                length: 20,
+                length2: 50,
+                minimalAngle: 15,
+                lineStyle: {
+                  width: 1
+                },
+                emphasis: {
+                  lineStyle: {
+                    width: 1
+                  }
+                }
               },
               emphasis: {
                 label: {
@@ -677,13 +807,15 @@ export default {
                   fontWeight: 'bold'
                 }
               },
-              data: data.map((row) => ({
+              data: data.map((row, index) => ({
                 name: row[selectedDimension],
-                value: row[metricProp]
+                value: row[metricProp],
+                itemStyle: {
+                  color: CHARTS_COLORS[index % CHARTS_COLORS.length]
+                }
               }))
             }
-          ],
-          color: ['#165DFF', '#14C9C9', '#F7BA1E', '#F53F3F', '#86909C', '#00B42A', '#FF7D00', '#F5319D']
+          ]
         }
       }
 
@@ -691,50 +823,43 @@ export default {
         const metricCol = this.columns.find((c) => c.prop === metric.prop)
         const metricName = metricCol ? metricCol.label : metric.prop
 
-        return {
-          name: metricName,
-          type: chartType === 'line' ? 'line' : 'bar',
-          data: data.map((row) => row[metric.prop]),
-          barMaxWidth: 24,
-          smooth: true
-        }
+        return merge(
+          {
+            name: metricName,
+            data: data.map((row) => row[metric.prop]),
+            barMaxWidth: 24
+          },
+          chartType === 'line'
+            ? {
+                type: 'line',
+                lineStyle: {
+                  width: 3
+                },
+                showSymbol: false,
+                emphasis: {
+                  showSymbol: true,
+                  itemStyle: {
+                    borderWidth: 2,
+                    borderColor: '#ffffff',
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0, 0, 0, 0.1)',
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 4
+                  }
+                },
+                symbolSize: 10,
+                symbol: 'circle',
+                smooth: false
+              }
+            : {
+                type: 'bar'
+              }
+        )
       })
 
       return {
-        tooltip: {
-          trigger: 'axis',
-          backgroundColor: '#fff',
-          borderColor: '#e5e6eb',
-          borderWidth: 1,
-          padding: [12, 12],
-          textStyle: {
-            color: '#1d2129'
-          },
-          extraCssText: 'box-shadow: 0px 8px 10px rgba(0,0,0,0.1); border-radius: 4px;',
-          formatter: (params) => {
-            const title = params[0].axisValue
-            const dataIndex = params[0].dataIndex
-            const rowData = this.processedData[dataIndex] || {}
-            const groupCount = rowData._groupCount || 0
-            let html = `<div style="font-size:14px;font-weight:500;margin-bottom:8px;color:#1d2129;">${title}</div>`
-            params.forEach((p) => {
-              const color = p.color
-              const value =
-                typeof p.value === 'number' ? p.value.toLocaleString('en-US', { minimumFractionDigits: 2 }) : p.value
-              html += `<div style="display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:4px;">`
-              html += `<div style="display:flex;align-items:center;gap:4px;">`
-              html += `<span style="display:inline-block;width:8px;height:3px;background:${color};"></span>`
-              html += `<span style="font-size:12px;color:#4e5969;font-family:'PingFang SC',sans-serif;">${p.seriesName}</span>`
-              html += `</div>`
-              html += `<div style="display:flex;align-items:center;gap:8px;">`
-              html += `<span style="font-size:12px;color:#1d2129;font-weight:600;font-family:'Open Sans',sans-serif;">${value}</span>`
-              html += `<span style="font-size:12px;color:#4e5969;font-family:'PingFang SC',sans-serif;">${groupCount} 笔</span>`
-              html += `</div>`
-              html += `</div>`
-            })
-            return html
-          }
-        },
+        color: CHARTS_COLORS,
+        tooltip: merge(tooltip, { trigger: 'axis' }),
         legend: {
           data: series.map((s) => s.name),
           top: 0,
@@ -794,8 +919,7 @@ export default {
             show: false
           }
         },
-        series,
-        color: ['#165DFF', '#14C9C9', '#F7BA1E', '#F53F3F', '#86909C']
+        series
       }
     }
   },
@@ -1013,11 +1137,7 @@ export default {
       const numericCols = this.availableMetrics
 
       // 分组统计模式：初始化分组维度
-      if (
-        this.currentReport.statType === 'group' &&
-        !this.currentReport.selectedDimension &&
-        allColumns.length > 0
-      ) {
+      if (this.currentReport.statType === 'group' && !this.currentReport.selectedDimension && allColumns.length > 0) {
         this.currentReport.selectedDimension = allColumns[0].prop
       }
 
@@ -1132,11 +1252,11 @@ export default {
 
     handleToggleLeftSidebar() {
       this.isLeftSidebarCollapsed = !this.isLeftSidebarCollapsed
-      this.$nextTick(() => {
+      setTimeout(() => {
         if (this.viewMode === 'chart' && this.$refs.chartView) {
           this.$refs.chartView.resizeChart()
         }
-      })
+      }, 300)
     },
 
     handleRenameReport({ id, name }) {
@@ -1257,11 +1377,11 @@ export default {
     // ========== ConfigSidebar 事件处理 ==========
     handleToggleRightSidebar() {
       this.isRightSidebarCollapsed = !this.isRightSidebarCollapsed
-      this.$nextTick(() => {
+      setTimeout(() => {
         if (this.viewMode === 'chart' && this.$refs.chartView) {
           this.$refs.chartView.resizeChart()
         }
-      })
+      }, 300)
     },
 
     handleNameChange(value) {
@@ -1424,4 +1544,4 @@ export default {
 
 <style lang="scss">
 @import '../../assets/css/pivot.scss';
-</style>
+</style>

package/src/components/TableProOperateColumn/OperateBtns.vue

@@ -24,13 +24,25 @@
                   :disabled="item2.disabled | dbdBtn(row)"
                 >
                   <el-badge v-if="resolveBadge(item2)" :value="resolveBadge(item2)" :max="item2.badgeMax || 99">
-                    <i v-if="item2.icon" :class="item2.icon" class="m-r-ss" />
-                    <el-link v-if="item2.type" :type="item2.type" :underline="false">{{ item2.label }}</el-link>
+                    <i v-if="item2.icon" :class="item2.icon" class="m-r-ss"></i>
+                    <el-link
+                      v-if="item2.type"
+                      :diabled="item2.disabled | dbdBtn(row)"
+                      :type="item2.type"
+                      :underline="false"
+                      >{{ item2.label }}</el-link
+                    >
                     <template v-else>{{ item2.label }}</template>
                   </el-badge>
                   <template v-else>
-                    <i v-if="item2.icon" :class="item2.icon" class="m-r-ss" />
-                    <el-link v-if="item2.type" :type="item2.type" :underline="false">{{ item2.label }}</el-link>
+                    <i v-if="item2.icon" :class="item2.icon" class="m-r-ss"></i>
+                    <el-link
+                      v-if="item2.type"
+                      :diabled="item2.disabled | dbdBtn(row)"
+                      :type="item2.type"
+                      :underline="false"
+                      >{{ item2.label }}</el-link
+                    >
                     <template v-else>{{ item2.label }}</template>
                   </template>
                 </el-dropdown-item>
@@ -39,24 +51,28 @@
           </el-dropdown-item>
           <el-dropdown-item v-else :key="item.label" :command="item.command" :disabled="item.disabled | dbdBtn(row)">
             <el-badge v-if="resolveBadge(item)" :value="resolveBadge(item)" :max="item.badgeMax || 99">
-              <i v-if="item.icon" :class="item.icon" class="m-r-ss" />
-              <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
+              <i v-if="item.icon" :class="item.icon" class="m-r-ss"></i>
+              <el-link v-if="item.type" :disabled="item.disabled | dbdBtn(row)" :type="item.type" :underline="false">{{
+                item.label
+              }}</el-link>
               <template v-else>{{ item.label }}</template>
             </el-badge>
             <template v-else>
-              <i v-if="item.icon" :class="item.icon" class="m-r-ss" />
-              <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
+              <i v-if="item.icon" :class="item.icon" class="m-r-ss"></i>
+              <el-link v-if="item.type" :disabled="item.disabled | dbdBtn(row)" :type="item.type" :underline="false">{{
+                item.label
+              }}</el-link>
               <template v-else>{{ item.label }}</template>
             </template>
           </el-dropdown-item>
         </template>
         <!-- 动态按钮加载中 -->
         <el-dropdown-item v-if="dynamicLoading" disabled class="table-operate-loading">
-          <i class="el-icon-loading" /> {{ $lc('加载中') }}
+          <i class="el-icon-loading"></i> {{ $lc('加载中') }}
         </el-dropdown-item>
         <!-- 动态按钮加载失败 -->
         <el-dropdown-item v-else-if="dynamicError" disabled class="table-operate-error">
-          <i class="el-icon-warning" /> {{ $lc('加载失败') }}
+          <i class="el-icon-warning"></i> {{ $lc('加载失败') }}
         </el-dropdown-item>
         <!-- 动态按钮列表 -->
         <template v-else>
@@ -67,13 +83,17 @@
             :disabled="item.disabled | dbdBtn(row)"
           >
             <el-badge v-if="resolveBadge(item)" :value="resolveBadge(item)" :max="item.badgeMax || 99">
-              <i v-if="item.icon" :class="item.icon" class="m-r-ss" />
-              <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
+              <i v-if="item.icon" :class="item.icon" class="m-r-ss"></i>
+              <el-link v-if="item.type" :disabled="item.disabled | dbdBtn(row)" :type="item.type" :underline="false">{{
+                item.label
+              }}</el-link>
               <template v-else>{{ item.label }}</template>
             </el-badge>
             <template v-else>
-              <i v-if="item.icon" :class="item.icon" class="m-r-ss" />
-              <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
+              <i v-if="item.icon" :class="item.icon" class="m-r-ss"></i>
+              <el-link v-if="item.type" :disabled="item.disabled | dbdBtn(row)" :type="item.type" :underline="false">{{
+                item.label
+              }}</el-link>
               <template v-else>{{ item.label }}</template>
             </template>
           </el-dropdown-item>
@@ -84,6 +104,7 @@
 </template>
 <script>
 import childrenOperateBtn from './childrenOperateBtn.vue'
+
 import { $lc } from '../../utils/i18n/index.js'
 
 export default {
@@ -188,4 +209,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/v3/TablePro/index.vue

@@ -67,7 +67,7 @@
         <vxe-column
           v-else-if="item.render"
           :key="'vxe-table__render_' + i"
-          v-bind="item"
+          v-bind="{ headerAlign: 'center', ...item }"
           :formatter="item.formatter ? item.formatter : 'formatName'"
           :filters="item.filters"
           :filter-render="item.filters && item.filters.length > 0 ? { name: 'FilterInput' } : null"
@@ -153,7 +153,7 @@
             :filter-render="subItem.filterRender"
             :title="subItem.label"
             :field="subItem.prop"
-            v-bind="subItem"
+            v-bind="{ headerAlign: 'center', ...subItem }"
             :class-name="`${subItem.wrap && `vxe-table-custom-wrap`} ${subItem.bold && `font-w600`}`"
           />
         </vxe-colgroup>
@@ -166,7 +166,7 @@
           :filter-render="item.filters && item.filters.length > 0 ? { name: 'FilterInput' } : null"
           :title="item.label"
           :field="item.prop"
-          v-bind="item"
+          v-bind="{ headerAlign: 'center', ...item }"
         >
           <template #header="{ column }">
             <div
@@ -213,7 +213,7 @@
           :filter-render="item.filters && item.filters.length > 0 ? { name: 'FilterInput' } : null"
           :title="item.label"
           :field="item.prop"
-          v-bind="item"
+          v-bind="{ headerAlign: 'center', ...item }"
         >
           <template #header="{ column }">
             <div
@@ -430,12 +430,12 @@
 </template>
 
 <script>
+import axios from '../../../utils/axios'
 import empty from '../../Empty'
-import tableOperate from '../../TableOperate/index.vue'
 import tableShowColumn from '../../ShowColumn/index.vue'
 import { saveTransform } from '../../ShowColumn/index.vue'
+import tableOperate from '../../TableOperate/index.vue'
 import OperateBtns from '../../TableProOperateColumn/OperateBtns.vue'
-import axios from '../../../utils/axios'
 
 const renderer = {
   name: 'renderer',