lambo-design-bi 0.0.183 → 0.0.185

package/bi/widget/num/index.vue

@@ -1,12 +1,14 @@
 <template>
   <LamboNumberInfoBi :title="title" :sub-title="subTitle" :num="num" :sub-num1="subNum1" :trend1="trend1"
-    :is-drill="isDrill" @on-drill="onDrill" :sub-num2="subNum2" :trend2="trend2" :polar1="polar1" :polar2="polar2" :eva-level="evaLevel">
+    :widget="widget" :is-drill="isDrill" @on-drill="onDrill" :sub-num2="subNum2" :trend2="trend2" :polar1="polar1"
+    :polar2="polar2" :eva-level="evaLevel" :tab-clickable="tabClickable" @on-tab-click="onTabClick">
   </LamboNumberInfoBi>
 </template>
 <script>
 import { getListMapData } from "../api/data"
 import LamboNumberInfoBi from "../../../pub/number-info/index"
-import { pageDrill } from '../util/router-util';
+import { pageDrill } from '../util/router-util'
+import { EVENT_TYPES, EventBus } from '../util/event-bus'
 
 export default {
   name: "BiNumIndex",
@@ -41,8 +43,10 @@ export default {
       drillK2: null,
       drillV2: null,
       drillK3: null,
-      dirllV3: null,
-      evaLevel: null
+      drillV3: null,
+      evaLevel: null,
+      tabClickable: false,
+      defaultTabActive: false
     }
   },
   methods: {
@@ -54,6 +58,12 @@ export default {
       if (this.toPageId && this.toRouteName) {
         this.isDrill = true
       }
+      if (this.widget.options["tabClickable"] === '1') {
+        this.tabClickable = true
+      }
+      if (this.widget.options["defaultTabActive"] === '1') {
+        this.defaultTabActive = true
+      }
     },
     doSearch() {
       if (!this.apiId) {
@@ -126,7 +136,25 @@ export default {
         console.error('num 跳转失败:', error.msg)
         this.$message.error(error.msg)
       }
-    }
+    },
+    onTabClick() {
+      console.log("num onTabClick 卡片点击触发父组件事件，当前实例:", this.widget.id + "_" + this.widget.name)
+      this.emitNumIdxTabClicked()
+    },
+    emitNumIdxTabClicked() {
+      if (this.tabClickable) {
+        // 发布卡片激活事件
+        EventBus.$emit(EVENT_TYPES.NUM_IDX_ACTIVATED, {
+          rootId: this.widget.rootId,
+          widgetId: this.widget.id,
+          widgetName: this.widget.name,
+          options: this.widget.options,
+          idxBizCode: this.widget.options.idxBizCode || null,
+          instance: this
+        })
+      }
+    },
+
   },
   created() {
     console.log("num-idx widget:", this.widget)
@@ -143,7 +171,10 @@ export default {
         this.doSearch()
       },
       deep: true
-    },
+    }
+  },
+  beforeDestroy() {
+
   }
 }
 </script>

package/bi/widget/page/index-page-tm.vue

@@ -26,6 +26,7 @@ import { getPageConfig } from '../api/config'
 import { deepCopy } from "@lambo-design/shared/utils/assist"
 import { getWidgetName } from '../util/widget-map'
 import { setRouteCfg2Search, getInitSearchRes, getSearchFormRes } from './util/common'
+import { EventBus, EVENT_TYPES } from '../util/event-bus'
 
 export default {
   name: 'BiIndexPageTm',
@@ -101,12 +102,19 @@ export default {
       }
       this.params = deepCopy(formParams)
       console.log("index-page-tm doSearch 2 this.params:", this.params)
+    },
+    handleNumIdxActivated(eventData) {
+      console.log('BiPage handleNumIdxActivated eventData:', eventData)
+      // 处理数值指标激活事件的逻辑 
+      this.$set(this.params, 'idxBizCode', eventData["idxBizCode"]);
     }
   },
   created() {
     this.getConfig()
   },
   mounted() {
+    // 监听卡片激活事件
+    EventBus.$on(EVENT_TYPES.NUM_IDX_ACTIVATED, this.handleNumIdxActivated)
 
   },
   computed: {
@@ -122,6 +130,10 @@ export default {
       )
       return filteredWidgets.length > 0
     }
+  },
+  beforeDestroy() {
+    // 组件销毁前移除事件监听
+    EventBus.$off(EVENT_TYPES.NUM_IDX_ACTIVATED, this.handleOtherCardActivated)
   }
 }
 </script>

package/bi/widget/util/event-bus.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+
+// 创建全局事件总线
+export const EventBus = new Vue()
+
+// 定义事件类型常量
+export const EVENT_TYPES = {
+  NUM_IDX_ACTIVATED: 'num-idx-activated',
+  NUM_IDX_DEACTIVATED: 'num-idx-deactivated'
+}

package/package.json

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

package/pub/charts/factory/options.js

@@ -94,7 +94,9 @@ function getLevelOption() {
  * 40 金字塔图
  * 41 矩形树图
  * 42 桑基图
- * 43 仪表盘进度条) <br/>
+ * 43 仪表盘进度条)
+ * 2A：单个柱状图以及多条折线,
+ * 2B：单个柱状图以及左右 <br/>
  * dataX：x轴数据 <br/>
  * dataY：y轴数据 <br/>
  * dataDim：组数据 （例如柱状图、折线图多组数据） <br/>
@@ -350,6 +352,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
   }
   else if (type === '20' || type === '21' || type === '22' || type === '23' || type === '24' || type === '25' || type === '26') {
     if (type === '20') {
+      const dynamicColors = dataDim.map((_, index) => colors[index % colors.length]);
       opt = {
         backgroundColor: '#fff',
         tooltip: {
@@ -358,6 +361,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
             type: 'shadow'
           }
         },
+        color: dynamicColors,
         grid: {
           top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
@@ -429,22 +433,22 @@ export function getECharts(type, dataX, dataY, dataDim) {
               normal: {
                 color: function (params) {
                   let colorArr =
-                    params.value > 0 ? ['#2d8cf0', 'rgb(150,204,251)'] : ['rgb(150,204,251)', '#2d8cf0'];
+                      params.value > 0 ? ['#2d8cf0', 'rgb(150,204,251)'] : ['rgb(150,204,251)', '#2d8cf0'];
                   return new echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [{
-                      offset: 0,
-                      color: colorArr[0],
-                    },
-                    {
-                      offset: 1,
-                      color: colorArr[1],
-                    },
-                    ],
-                    false
+                      0,
+                      0,
+                      0,
+                      1,
+                      [{
+                        offset: 0,
+                        color: colorArr[0],
+                      },
+                        {
+                          offset: 1,
+                          color: colorArr[1],
+                        },
+                      ],
+                      false
                   );
                 },
                 barBorderRadius: [1],
@@ -457,6 +461,15 @@ export function getECharts(type, dataX, dataY, dataDim) {
               fontSize: 10,
             },
             data: dataY[0],
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            }
           },
         ]
       }
@@ -1179,7 +1192,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
 
       // 将 dataY 转换为带索引的排序数组
       let sortedIndices = dataY[0].map((_, index) => index)
-        .sort((a, b) => dataY[0][b] - dataY[0][a]); // 根据 dataX 的值降序排列
+          .sort((a, b) => dataY[0][b] - dataY[0][a]); // 根据 dataX 的值降序排列
 
       for (let i = 0; i < sortedIndices.length; i++) {
         const index = sortedIndices[i];
@@ -1263,7 +1276,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
       let radius = ['40%', '60%']; // 控制饼块粗细的半径范围
       let prevAngle = 0; // 初始角度
       let sortedIndices = dataY[0].map((_, index) => index)
-        .sort((a, b) => dataY[0][b] - dataY[0][a]); // 根据dataY的值进行降序排序并获取索引
+          .sort((a, b) => dataY[0][b] - dataY[0][a]); // 根据dataY的值进行降序排序并获取索引
 
       for (let i = 0; i < sortedIndices.length; i++) {
         const index = sortedIndices[i];
@@ -1749,37 +1762,37 @@ export function getECharts(type, dataX, dataY, dataDim) {
             value: dataY[0][index] * dataX.length,
             name: name
           },
-          {
-            value: sum - dataY[0][index],
-            name: name,
-            itemStyle: {
-              normal: {
-                color: "rgba(0,0,0,0)"
-              }
-            },
-            label: {
-              normal: {
-                show: false,
+            {
+              value: sum - dataY[0][index],
+              name: name,
+              itemStyle: {
+                normal: {
+                  color: "rgba(0,0,0,0)"
+                }
               },
-              emphasis: {
-                show: false
-              }
-            },
-            labelLine: {
-              normal: {
-                show: false
+              label: {
+                normal: {
+                  show: false,
+                },
+                emphasis: {
+                  show: false
+                }
               },
-              emphasis: {
-                show: false
-              }
-            },
-            tooltip: {
-              show: false,
-              formatter: function () {
-                return '';
+              labelLine: {
+                normal: {
+                  show: false
+                },
+                emphasis: {
+                  show: false
+                }
+              },
+              tooltip: {
+                show: false,
+                formatter: function () {
+                  return '';
+                }
               }
             }
-          }
           ]
         });
         if (showBackground === true) {
@@ -1894,37 +1907,37 @@ export function getECharts(type, dataX, dataY, dataDim) {
             value: dataY[0][index],
             name: name
           },
-          {
-            value: sum,
-            name: name,
-            itemStyle: {
-              normal: {
-                color: "rgba(0,0,0,0)"
-              }
-            },
-            label: {
-              normal: {
-                show: false,
+            {
+              value: sum,
+              name: name,
+              itemStyle: {
+                normal: {
+                  color: "rgba(0,0,0,0)"
+                }
               },
-              emphasis: {
-                show: false
-              }
-            },
-            labelLine: {
-              normal: {
-                show: false
+              label: {
+                normal: {
+                  show: false,
+                },
+                emphasis: {
+                  show: false
+                }
               },
-              emphasis: {
-                show: false
-              }
-            },
-            tooltip: {
-              show: false,
-              formatter: function () {
-                return '';
+              labelLine: {
+                normal: {
+                  show: false
+                },
+                emphasis: {
+                  show: false
+                }
+              },
+              tooltip: {
+                show: false,
+                formatter: function () {
+                  return '';
+                }
               }
             }
-          }
           ]
         });
         if (showBackground == true) {
@@ -1949,37 +1962,37 @@ export function getECharts(type, dataX, dataY, dataDim) {
                 color: "#E3F0FF"
               },
             },
-            {
-              value: 5,
-              name: name,
-              itemStyle: {
-                normal: {
-                  color: "rgba(0,0,0,0)"
-                }
-              },
-              label: {
-                normal: {
-                  show: false,
+              {
+                value: 5,
+                name: name,
+                itemStyle: {
+                  normal: {
+                    color: "rgba(0,0,0,0)"
+                  }
                 },
-                emphasis: {
-                  show: false
-                }
-              },
-              labelLine: {
-                normal: {
-                  show: false
+                label: {
+                  normal: {
+                    show: false,
+                  },
+                  emphasis: {
+                    show: false
+                  }
                 },
-                emphasis: {
-                  show: false
-                }
-              },
-              tooltip: {
-                show: false,
-                formatter: function () {
-                  return '';
+                labelLine: {
+                  normal: {
+                    show: false
+                  },
+                  emphasis: {
+                    show: false
+                  }
+                },
+                tooltip: {
+                  show: false,
+                  formatter: function () {
+                    return '';
+                  }
                 }
               }
-            }
             ]
           });
         }
@@ -2310,6 +2323,262 @@ export function getECharts(type, dataX, dataY, dataDim) {
       };
     }
   }
+  else if (type ==='2A'){
+    let series = [];
+    if (dataY.length > 0) {
+      series.push({
+        name: dataDim[0],
+        type: 'bar',
+        barWidth: '30px',
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              const baseColor = colors[0];
+              const lightColor = hexToRgba(baseColor, 0.6);
+              const colorArr = params.value > 0 ? [baseColor, lightColor] : [lightColor, baseColor];
+              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: colorArr[0] },
+                { offset: 1, color: colorArr[1] }
+              ]);
+            },
+            barBorderRadius: [1]
+          }
+        },
+        tooltip: { valueFormatter: value => value },
+        data: dataY.map(item => item[0])
+      });
+    }
+    for (let i = 1; i < 2; i++) {
+      series.push({
+        name: dataDim[i],
+        type: 'line',
+        smooth: true,
+        showAllSymbol: true,
+        symbol: 'circle',
+        showSymbol: true,
+        symbolSize: 5,
+        lineStyle: {
+          color: colors[i % colors.length],
+          width: 3
+        },
+        label: { show: false },
+        itemStyle: {
+          color: colors[i % colors.length],
+          borderColor: hexToRgba(colors[i % colors.length], 0.6),
+          borderWidth: 3
+        },
+        tooltip: { valueFormatter: value => value },
+        data: dataY.map(item => item[1])
+      });
+    }
+    const dynamicColors = dataDim.map((_, index) => colors[index % colors.length]);
+    opt = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+          lineStyle: { color: '#57617B' }
+        }
+      },
+      legend: {
+        data: dataDim,
+        top: 0,
+        itemWidth: 10,
+        itemHeight: 6,
+        selectedMode: true,
+        textStyle: {
+          fontSize: '10px',
+          fontFamily: 'Microsoft YaHei',
+          fontWeight: '400',
+          color: '#666'
+        },
+      },
+      color: dynamicColors,
+      grid: {
+        top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: dataX,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#333333'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          axisLabel: { formatter: '{value}' },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#f0f0f0'
+            }
+          }
+        }
+      ],
+      series: series
+    };
+  }
+  else if (type ==='2B'){
+    let series = [];
+    if (dataY.length > 0) {
+      series.push({
+        name: dataDim[0],
+        type: 'pictorialBar',
+        barWidth: '30px',
+        symbol: 'rect',
+        symbolSize: ['100%', 4],
+        symbolRepeat: true,
+        symbolMargin: 0.3,
+        symbolBoundingData: Math.max(...dataY.map(item => item[0])),
+        itemStyle: {
+          color: colors[0]
+        },
+        tooltip: { valueFormatter: value => value },
+        data: dataY.map(item => item[0])
+      });
+    }
+    if (dataY.length > 1) {
+      series.push({
+        name: dataDim[1],
+        type: 'line',
+        yAxisIndex: 1,
+        smooth: true,
+        showAllSymbol: true,
+        symbol: 'circle',
+        showSymbol: true,
+        symbolSize: 5,
+        lineStyle: {
+          color: colors[1],
+          width: 3
+        },
+        label: { show: false },
+        itemStyle: {
+          color: colors[1],
+          borderColor: hexToRgba(colors[1], 0.6),
+          borderWidth: 3
+        },
+        tooltip: { valueFormatter: value => value },
+        data: dataY.map(item => item[1])
+      });
+    }
+
+    for (let i = 2; i < 3; i++) {
+      series.push({
+        name: dataDim[i],
+        type: 'line',
+        yAxisIndex: 0,
+        smooth: true,
+        showAllSymbol: true,
+        symbol: 'circle',
+        showSymbol: true,
+        symbolSize: 5,
+        lineStyle: {
+          color: colors[i % colors.length],
+          width: 3
+        },
+        label: { show: false },
+        itemStyle: {
+          color: colors[i % colors.length],
+          borderColor: hexToRgba(colors[i % colors.length], 0.6),
+          borderWidth: 3
+        },
+        tooltip: { valueFormatter: value => value },
+        data: dataY.map(item => item[2])
+      });
+    }
+    const dynamicColors = dataDim.map((_, index) => colors[index % colors.length]);
+
+    opt = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+          lineStyle: { color: '#57617B' }
+        }
+      },
+      legend: {
+        data: dataDim,
+        top: 0,
+        itemWidth: 10,
+        itemHeight: 6,
+        selectedMode: true,
+        textStyle: {
+          fontSize: '10px',
+          fontFamily: 'Microsoft YaHei',
+          fontWeight: '400',
+          color: '#666'
+        },
+      },
+      color: dynamicColors,
+      grid: {
+        top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: dataX,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#333333'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          name: '',
+          axisLabel: { formatter: '{value}' },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#f0f0f0'
+            }
+          }
+        },
+        {
+          type: 'value',
+          name: '',
+          axisLabel: { formatter: '{value}' },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        }
+      ],
+      series: series
+    };
+  }
   return opt
 }
 

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

@@ -1,5 +1,6 @@
 <template>
-  <div class="ivu-number-info">
+  <div class="ivu-number-info" :class="{ 'card-active': isActive, 'card-tabClickable': tabClickable }"
+    @click="handleTabClick">
     <div class="ivu-number-info-title-lambo title-div" :class="{ 'isDrill': isDrill }" v-if="title" @click="drill">
       <slot name="title">{{ title }}</slot>
       <div class="cd-right-top">
@@ -55,12 +56,14 @@
         </slot>
       </span>
     </div>
+    <div class="card-bottom-line" :class="{ 'active': isActive }"></div>
   </div>
 </template>
 <script>
 import { oneOf } from 'view-ui-plus/src/utils/assist'
 import Trend from 'view-ui-plus/src/components/trend'
 import 'view-ui-plus/dist/styles/viewuiplus.css'
+import { EVENT_TYPES, EventBus } from '../../bi/widget/util/event-bus'
 
 export default {
   name: 'LamboNumberInfoBi',
@@ -117,7 +120,19 @@ export default {
     evaLevel: {
       type: String,
       default: ''
-    }
+    },
+    tabClickable: {
+      type: Boolean,
+      default: true
+    },
+    defaultTabActive: {
+      type: Boolean,
+      default: false
+    },
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
   },
   computed: {
     valueStyle() {
@@ -126,13 +141,61 @@ export default {
       };
     }
   },
+  data() {
+    return {
+      isActive: false
+    }
+  },
   methods: {
     drill() {
       if (this.isDrill) {
         console.log("number-info 点击了下钻按钮")
         this.$emit('on-drill', {})
       }
+    },
+    handleTabClick() {
+      if (this.tabClickable) {
+        if (!this.isActive) {
+          this.isActive = true
+          this.$emit('on-tab-click', {})
+        }
+        console.log("num-info handleTabClick 卡片被点击，当前实例:", this.widget.id + "_" + this.widget.name)
+      }
+    },
+    handleOtherNumIdxTabClicked(eventData) {
+      // 处理其他卡片激活事件：如果是同一个页面，且不是当前卡片，则取消激活
+      if (eventData && this.widget && this.tabClickable === true && this.isActive === true
+        && eventData.rootId === this.widget.rootId && eventData.widgetId !== this.widget.id) {
+        this.isActive = false
+        console.log(`num-info handleOtherCardActivated 卡片 ${this.widget.id}_${this.widget.name} 因 ${eventData.widgetId}_${eventData.widgetName} 激活而取消激活`)
+      }
+    },
+    eventBusOn() {
+      if (this.tabClickable) {
+        EventBus.$on(EVENT_TYPES.NUM_IDX_ACTIVATED, this.handleOtherNumIdxTabClicked)
+      }
+    },
+    eventBusOff() {
+      if (this.tabClickable) {
+        EventBus.$off(EVENT_TYPES.NUM_IDX_ACTIVATED, this.handleOtherNumIdxTabClicked)
+      }
+    },
+    initDefTabClickActiveStatus() {
+      if(this.tabClickable === true && this.defaultTabActive === true ){
+        if (!this.isActive) {
+          this.isActive = true
+          this.$emit('on-tab-click', {})
+        }
+        console.log("num-info handleCardClick 卡片初始设置为激活状态触发点击，当前实例:", this.widget.id + "_" + this.widget.name)
+      }
     }
+  },
+  created() {
+    this.eventBusOn()
+    this.initDefTabClickActiveStatus()
+  },
+  beforeDestroy() {
+    this.eventBusOff()
   }
 };
 </script>
@@ -184,4 +247,43 @@ export default {
   margin-right: -8px;
   border-top-right-radius: 6px;
 }
+
+// 重写卡片基础样式，添加点击效果
+.ivu-number-info {
+  cursor: default;
+
+  // 新增：可点击状态
+  &.card-tabClickable {
+    cursor: pointer;
+
+    &:hover {
+      transform: translateY(-2px);
+    }
+  }
+
+  // 新增：激活状态
+  &.card-active {
+    .card-bottom-line.active {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+  }
+}
+
+.card-bottom-line {
+  width: 100%;
+  height: 3px;
+  margin-bottom: -10px;
+  background: linear-gradient(90deg, #1890ff, #69c0ff);
+  opacity: 0;
+  transform: scaleX(0.8);
+  transition: all 0.3s ease;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+
+  &.active {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
 </style>