lambo-design-bi 0.0.229 → 0.0.230

package/bi/widget/table/paging-table.vue

@@ -241,6 +241,238 @@ export default {
       }
       return children
     },
+    isTrendChartsColumn(column) {
+      const isTrendCharts = column && (column.isTrendCharts === true || column.isTrendCharts === '1')
+      if (isTrendCharts) {
+        console.log("BiPagingTable -- isTrendChartsColumn -- 命中趋势图列:", column)
+      }
+      return isTrendCharts
+    },
+    stringifyTrendChartsValue(value) {
+      if (value === null || value === undefined) {
+        return ''
+      }
+      if (typeof value === 'object') {
+        try {
+          return JSON.stringify(value)
+        } catch (e) {
+          return String(value)
+        }
+      }
+      return String(value)
+    },
+    parseTrendChartsValue(value) {
+      if (Array.isArray(value)) {
+        return value
+      }
+      if (typeof value === 'string') {
+        const trimValue = value.trim()
+        if (trimValue.indexOf('[') === 0 && trimValue.lastIndexOf(']') === trimValue.length - 1) {
+          try {
+            const parseValue = JSON.parse(trimValue)
+            if (Array.isArray(parseValue)) {
+              console.log("BiPagingTable -- parseTrendChartsValue -- 字符串数组解析成功:", {
+                value,
+                parseValue
+              })
+              return parseValue
+            }
+          } catch (e) {
+            console.log("BiPagingTable -- parseTrendChartsValue -- 字符串数组解析失败:", {
+              value,
+              error: e
+            })
+          }
+        }
+      }
+      return value
+    },
+    renderTrendChartsCell(h, params) {
+      const key = params.column.key
+      const value = params.row[key]
+      const chartValue = this.parseTrendChartsValue(value)
+      console.log("BiPagingTable -- renderTrendChartsCell -- 渲染趋势图单元格:", {
+        key,
+        title: params.column.title,
+        rowIndex: params.index,
+        value,
+        chartValue,
+        isArray: Array.isArray(chartValue)
+      })
+      if (!Array.isArray(chartValue)) {
+        console.log("BiPagingTable -- renderTrendChartsCell -- 当前值不是数组，按字符串展示:", {
+          key,
+          value,
+          stringValue: this.stringifyTrendChartsValue(value)
+        })
+        return h('span', this.stringifyTrendChartsValue(value))
+      }
+
+      const width = Number(params.column.trendChartWidth) || 240
+      const height = Number(params.column.trendChartHeight) || 48
+      return h('canvas', {
+        class: 'bi-trend-canvas',
+        attrs: {
+          width,
+          height
+        },
+        style: {
+          display: 'block',
+          margin: '0',
+          width: width + 'px',
+          height: height + 'px'
+        },
+        hook: {
+          insert: vnode => {
+            console.log("BiPagingTable -- renderTrendChartsCell -- canvas 已插入DOM，准备绘制:", {
+              key: params.column.key,
+              rowIndex: params.index,
+              width,
+              height,
+              dataLength: chartValue.length
+            })
+            this.drawTrendCharts(vnode.elm, chartValue, width, height, params.column)
+          },
+          postpatch: (...args) => {
+            const vnode = args[1]
+            console.log("BiPagingTable -- renderTrendChartsCell -- canvas 更新，重新绘制:", {
+              key: params.column.key,
+              rowIndex: params.index,
+              width,
+              height,
+              dataLength: chartValue.length
+            })
+            this.drawTrendCharts(vnode.elm, chartValue, width, height, params.column)
+          }
+        }
+      })
+    },
+    getTrendChartsSmooth() {
+      return true
+    },
+    drawTrendChartsLine(ctx, points, smooth) {
+      ctx.beginPath()
+      points.forEach((point, index) => {
+        if (index === 0) {
+          ctx.moveTo(point.x, point.y)
+        } else if (smooth) {
+          const prevPoint = points[index - 1]
+          const midX = (prevPoint.x + point.x) / 2
+          ctx.bezierCurveTo(midX, prevPoint.y, midX, point.y, point.x, point.y)
+        } else {
+          ctx.lineTo(point.x, point.y)
+        }
+      })
+    },
+    drawTrendChartsArea(ctx, points, smooth, bottomY) {
+      ctx.beginPath()
+      ctx.moveTo(points[0].x, bottomY)
+      points.forEach((point, index) => {
+        if (index === 0) {
+          ctx.lineTo(point.x, point.y)
+        } else if (smooth) {
+          const prevPoint = points[index - 1]
+          const midX = (prevPoint.x + point.x) / 2
+          ctx.bezierCurveTo(midX, prevPoint.y, midX, point.y, point.x, point.y)
+        } else {
+          ctx.lineTo(point.x, point.y)
+        }
+      })
+      ctx.lineTo(points[points.length - 1].x, bottomY)
+      ctx.closePath()
+    },
+    drawTrendCharts(canvas, data, width, height, column) {
+      if (!canvas) {
+        console.log("BiPagingTable -- drawTrendCharts -- canvas 不存在，无法绘制", { data, width, height })
+        return
+      }
+
+      const chartData = data.map(item => Number(item))
+      if (!chartData.length || chartData.some(item => isNaN(item))) {
+        console.log("BiPagingTable -- drawTrendCharts -- 数据为空或存在非数字，无法绘制:", {
+          data,
+          chartData,
+          hasNaN: chartData.some(item => isNaN(item))
+        })
+        return
+      }
+
+      const ctx = canvas.getContext('2d')
+      console.log("BiPagingTable -- drawTrendCharts -- 开始绘制趋势图:", {
+        data,
+        chartData,
+        width,
+        height,
+        canvasClientWidth: canvas.clientWidth,
+        canvasClientHeight: canvas.clientHeight
+      })
+      const ratio = window.devicePixelRatio || 1
+      canvas.width = width * ratio
+      canvas.height = height * ratio
+      canvas.style.width = width + 'px'
+      canvas.style.height = height + 'px'
+      ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
+      ctx.clearRect(0, 0, width, height)
+
+      const padding = { top: 6, right: 6, bottom: 6, left: 6 }
+      const chartW = width - padding.left - padding.right
+      const chartH = height - padding.top - padding.bottom
+      const max = Math.max(...chartData)
+      const min = Math.min(...chartData)
+      const range = max - min || 1
+      const points = chartData.map((val, index) => ({
+        x: chartData.length === 1 ? width / 2 : padding.left + (index / (chartData.length - 1)) * chartW,
+        y: padding.top + chartH - ((val - min) / range) * chartH
+      }))
+      const smooth = this.getTrendChartsSmooth()
+      console.log("BiPagingTable -- drawTrendCharts -- 趋势图线条类型:", {
+        key: column && column.key,
+        pointCount: points.length,
+        smooth
+      })
+
+      const gradient = ctx.createLinearGradient(0, padding.top, 0, height)
+      gradient.addColorStop(0, 'rgba(45, 140, 240, 0.25)')
+      gradient.addColorStop(0.5, 'rgba(45, 140, 240, 0.1)')
+      gradient.addColorStop(1, 'rgba(45, 140, 240, 0.02)')
+
+      this.drawTrendChartsArea(ctx, points, smooth, height - padding.bottom)
+      ctx.fillStyle = gradient
+      ctx.fill()
+
+      this.drawTrendChartsLine(ctx, points, smooth)
+      ctx.strokeStyle = '#2d8cf0'
+      ctx.lineWidth = 1.8
+      ctx.lineJoin = 'round'
+      ctx.lineCap = 'round'
+      ctx.stroke()
+
+      points.forEach((point, index) => {
+        if (index === 0 || index === points.length - 1 || index % 3 === 0) {
+          ctx.beginPath()
+          ctx.arc(point.x, point.y, 2.5, 0, Math.PI * 2)
+          ctx.fillStyle = '#fff'
+          ctx.fill()
+          ctx.strokeStyle = '#2d8cf0'
+          ctx.lineWidth = 1.5
+          ctx.stroke()
+        }
+      })
+
+      const lastPoint = points[points.length - 1]
+      ctx.beginPath()
+      ctx.arc(lastPoint.x, lastPoint.y, 4, 0, Math.PI * 2)
+      ctx.fillStyle = 'rgba(45, 140, 240, 0.2)'
+      ctx.fill()
+      ctx.strokeStyle = '#2d8cf0'
+      ctx.lineWidth = 2
+      ctx.stroke()
+      console.log("BiPagingTable -- drawTrendCharts -- 趋势图绘制完成", {
+        pointCount: points.length,
+        min,
+        max
+      })
+    },
     onClose() {
       this.boxShow = false
     },
@@ -285,7 +517,12 @@ export default {
                 column.type = 'index'
                 column.indexMethod = (row, index) => this.getRankIcon(this.getRankTableIndex(index, row))
               }
-              if (column.detailName) {
+              if (this.isTrendChartsColumn(column)) {
+                let self = this
+                column.render = function (h, params) {
+                  return self.renderTrendChartsCell(h, params)
+                }
+              } else if (column.detailName) {
                 let self = this
                 column.render = function (h, params) {
                   return h(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lambo-design-bi",
-  "version": "0.0.229",
+  "version": "0.0.230",
   "description": "Vue2 BI 数据可视化组件库",
   "main": "index.js",
   "author": "finch",