lambo-design-bi 0.0.233 → 0.0.234

package/bi/widget/num/index.vue

@@ -1,7 +1,8 @@
 <template>
   <LamboNumberInfoBi :title="title" :sub-title="subTitle" :num="num" :sub-num1="subNum1" :trend1="trend1"
     :widget="widget" :is-drill="isDrill" @on-drill="onDrill" :sub-num2="subNum2" :trend2="trend2" :polar1="polar1"
-    :polar2="polar2" :eva-level="evaLevel" :tab-clickable="tabClickable" :default-tab-active="defaultTabActive" @on-tab-click="onTabClick">
+    :polar2="polar2" :eva-level="evaLevel" :tab-clickable="tabClickable" :default-tab-active="defaultTabActive"
+    :show-trend-chart="isTrendCharts" :trend-chart-data="trendChartsData" @on-tab-click="onTabClick">
   </LamboNumberInfoBi>
 </template>
 <script>
@@ -46,7 +47,9 @@ export default {
       drillV3: null,
       evaLevel: null,
       tabClickable: false,
-      defaultTabActive: false
+      defaultTabActive: false,
+      isTrendCharts: false,
+      trendChartsData: []
     }
   },
   methods: {
@@ -65,6 +68,29 @@ export default {
         console.log("num-info initConfig 卡片初始设置为激活状态触发点击，START 当前实例:", this.widget.id + "_" + this.widget.name + ",defaultTabActive:" + this.widget.options["defaultTabActive"])
         this.defaultTabActive = true
       }
+      this.isTrendCharts = this.widget.options.isTrendCharts === true || this.widget.options.isTrendCharts === '1'
+    },
+    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)) {
+              return parseValue
+            }
+          } catch (e) {
+            console.log("BiNumIndex -- parseTrendChartsValue -- 字符串数组解析失败:", {
+              value,
+              error: e
+            })
+          }
+        }
+      }
+      return []
     },
     doSearch() {
       if (!this.apiId) {
@@ -75,6 +101,7 @@ export default {
         if (res.data.code === 0) {
           console.error("数据卡片的调用服务[" + this.widget.options.apiId + "]失败：" + res.data.message)
         } else {
+          this.trendChartsData = []
           if (res.data.data.rows.length > 0) {
             let row = res.data.data.rows[0]
             if (row) {
@@ -105,6 +132,9 @@ export default {
               if (Object.prototype.hasOwnProperty.call(row, 'eva_level')) {
                 this.evaLevel = row['eva_level'] || ''
               }
+              if (this.isTrendCharts) {
+                this.trendChartsData = this.parseTrendChartsValue(row['trendChartsData'])
+              }
             }
           }
         }

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

@@ -356,7 +356,8 @@ export default {
           display: 'block',
           margin: '0',
           width: width + 'px',
-          height: height + 'px'
+          height: height + 'px',
+          opacity: 0.62
         },
         hook: {
           insert: vnode => {

package/package.json

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

package/pub/number-info/number-info.vue

@@ -21,40 +21,45 @@
     <div v-if="subTitle" class="ivu-number-info-subTitle">
       <slot name="subTitle">{{ subTitle }}</slot>
     </div>
-    <div class="ivu-number-info-value-lambo" :style="valueStyle">
-      <span class="ivu-number-info-total">
-        <slot name="num">{{ num }}</slot>
-      </span>
-      <span class="ivu-number-info-subTotal" v-if="subNum1 || subNum2">
-        <slot name="subNum">
-          <template v-if="subNum1">
-            <template v-if="trend1">
-              <template v-if="polar1 === 'pos'">
-                <Trend :flag="trend1" text-color reverse-color>{{ subNum1 }}</Trend>
+    <div class="number-info-content" :class="{ 'has-trend-chart': hasTrendChart }">
+      <div v-if="hasTrendChart" class="number-info-trend-chart-bg">
+        <canvas ref="trendCanvas"></canvas>
+      </div>
+      <div class="ivu-number-info-value-lambo" :style="valueStyle">
+        <span class="ivu-number-info-total">
+          <slot name="num">{{ num }}</slot>
+        </span>
+        <span class="ivu-number-info-subTotal" v-if="subNum1 || subNum2">
+          <slot name="subNum">
+            <template v-if="subNum1">
+              <template v-if="trend1">
+                <template v-if="polar1 === 'pos'">
+                  <Trend :flag="trend1" text-color reverse-color>{{ subNum1 }}</Trend>
+                </template>
+                <template v-else>
+                  <Trend :flag="trend1" text-color>{{ subNum1 }}</Trend>
+                </template>
               </template>
               <template v-else>
-                <Trend :flag="trend1" text-color>{{ subNum1 }}</Trend>
+                {{ subNum1 }}
               </template>
             </template>
-            <template v-else>
-              {{ subNum1 }}
-            </template>
-          </template>
-          <template v-if="subNum2">
-            <template v-if="trend2">
-              <template v-if="polar2 === 'pos'">
-                <Trend :flag="trend2" text-color reverse-color>{{ subNum2 }}</Trend>
+            <template v-if="subNum2">
+              <template v-if="trend2">
+                <template v-if="polar2 === 'pos'">
+                  <Trend :flag="trend2" text-color reverse-color>{{ subNum2 }}</Trend>
+                </template>
+                <template v-else>
+                  <Trend :flag="trend2" text-color>{{ subNum2 }}</Trend>
+                </template>
               </template>
               <template v-else>
-                <Trend :flag="trend2" text-color>{{ subNum2 }}</Trend>
+                {{ subNum2 }}
               </template>
             </template>
-            <template v-else>
-              {{ subNum2 }}
-            </template>
-          </template>
-        </slot>
-      </span>
+          </slot>
+        </span>
+      </div>
     </div>
     <div class="card-bottom-line" :class="{ 'active': isActive }"></div>
   </div>
@@ -129,6 +134,14 @@ export default {
       type: Boolean,
       default: false
     },
+    showTrendChart: {
+      type: Boolean,
+      default: false
+    },
+    trendChartData: {
+      type: Array,
+      default: () => []
+    },
     widget: {
       type: Object,
       default: () => ({})
@@ -139,6 +152,9 @@ export default {
       return {
         'margin-top': this.gap + 'px'
       };
+    },
+    hasTrendChart() {
+      return this.showTrendChart && this.trendChartData && this.trendChartData.length > 0
     }
   },
   data() {
@@ -189,6 +205,85 @@ export default {
         }
         console.log("num-info handleCardClick 卡片初始设置为激活状态触发点击，END 当前实例:", this.widget.id + "_" + this.widget.name)
       }
+    },
+    drawTrendChart() {
+      const canvas = this.$refs.trendCanvas
+      if (!canvas) return
+
+      const width = canvas.clientWidth || 160
+      const height = canvas.clientHeight || 64
+      const data = this.trendChartData.map(item => Number(item))
+      const ctx = canvas.getContext('2d')
+      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)
+      if (!data.length || data.some(item => isNaN(item))) {
+        return
+      }
+
+      const padding = { top: 5, right: 6, bottom: 5, left: 6 }
+      const chartW = width - padding.left - padding.right
+      const chartH = height - padding.top - padding.bottom
+      const dataMax = Math.max(...data)
+      const dataMin = Math.min(...data)
+      const dataRange = dataMax - dataMin || 1
+      const max = dataMax + dataRange * 0.04
+      const min = dataMin - dataRange * 0.04
+      const range = max - min || 1
+      const points = data.map((val, index) => ({
+        x: data.length === 1 ? width / 2 : padding.left + (index / (data.length - 1)) * chartW,
+        y: padding.top + chartH - ((val - min) / range) * chartH
+      }))
+
+      const gradient = ctx.createLinearGradient(0, padding.top, 0, height)
+      gradient.addColorStop(0, 'rgba(45, 140, 240, 0.32)')
+      gradient.addColorStop(0.55, 'rgba(45, 140, 240, 0.12)')
+      gradient.addColorStop(1, 'rgba(45, 140, 240, 0.03)')
+
+      ctx.beginPath()
+      ctx.moveTo(points[0].x, height - padding.bottom)
+      points.forEach((point, index) => {
+        if (index === 0) {
+          ctx.lineTo(point.x, point.y)
+        } else {
+          const prevPoint = points[index - 1]
+          const midX = (prevPoint.x + point.x) / 2
+          ctx.bezierCurveTo(midX, prevPoint.y, midX, point.y, point.x, point.y)
+        }
+      })
+      ctx.lineTo(points[points.length - 1].x, height - padding.bottom)
+      ctx.closePath()
+      ctx.fillStyle = gradient
+      ctx.fill()
+
+      ctx.beginPath()
+      points.forEach((point, index) => {
+        if (index === 0) {
+          ctx.moveTo(point.x, point.y)
+        } else {
+          const prevPoint = points[index - 1]
+          const midX = (prevPoint.x + point.x) / 2
+          ctx.bezierCurveTo(midX, prevPoint.y, midX, point.y, point.x, point.y)
+        }
+      })
+      ctx.strokeStyle = '#2d8cf0'
+      ctx.lineWidth = 1.8
+      ctx.lineJoin = 'round'
+      ctx.lineCap = 'round'
+      ctx.stroke()
+
+      const lastPoint = points[points.length - 1]
+      ctx.beginPath()
+      ctx.arc(lastPoint.x, lastPoint.y, 3, 0, Math.PI * 2)
+      ctx.fillStyle = 'rgba(45, 140, 240, 0.18)'
+      ctx.fill()
+      ctx.strokeStyle = '#2d8cf0'
+      ctx.lineWidth = 1.5
+      ctx.stroke()
     }
   },
   created() {
@@ -196,13 +291,62 @@ export default {
   },
   mounted() {
     this.initDefTabClickActiveStatus()
+    this.$nextTick(() => {
+      if (this.hasTrendChart) {
+        this.drawTrendChart()
+      }
+    })
   },
   beforeDestroy() {
     this.eventBusOff()
+  },
+  watch: {
+    trendChartData() {
+      this.$nextTick(() => {
+        if (this.hasTrendChart) {
+          this.drawTrendChart()
+        }
+      })
+    },
+    showTrendChart() {
+      this.$nextTick(() => {
+        if (this.hasTrendChart) {
+          this.drawTrendChart()
+        }
+      })
+    }
   }
 };
 </script>
 <style scoped lang="less">
+.number-info-content.has-trend-chart {
+  position: relative;
+  min-height: 64px;
+  overflow: hidden;
+
+  .number-info-trend-chart-bg {
+    position: absolute;
+    right: -2px;
+    bottom: 0;
+    width: 65%;
+    height: 64px;
+    opacity: 0.62;
+    pointer-events: none;
+    z-index: 0;
+
+    canvas {
+      display: block;
+      width: 100%;
+      height: 64px;
+    }
+  }
+
+  .ivu-number-info-value-lambo {
+    position: relative;
+    z-index: 1;
+  }
+}
+
 .ivu-number-info-value-lambo {
   font-family: var("DIN Alternate", "Roboto Mono", Menlo, Consolas, monospace);
   font-variant-numeric: tabular-nums;
@@ -214,6 +358,8 @@ export default {
   text-overflow: ellipsis;
   word-break: break-all;
   display: flex;
+  flex: 1;
+  min-width: 0;
   flex-direction: column;
 }