lambo-design-bi 0.0.183 → 0.0.184

package/bi/widget/num/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <LamboNumberInfoBi :title="title" :sub-title="subTitle" :num="num" :sub-num1="subNum1" :trend1="trend1"
+  <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">
   </LamboNumberInfoBi>
 </template>

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)
+      // 处理数值指标激活事件的逻辑 
+
     }
   },
   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.184",
   "description": "Vue2 BI 数据可视化组件库",
   "main": "index.js",
   "author": "finch",

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-clickable': clickable }"
+    @click="handleCardClick">
     <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,13 +56,17 @@
         </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 { EVENT_TYPES, EventBus } from '../../bi/widget/util/event-bus';
 import 'view-ui-plus/dist/styles/viewuiplus.css'
 
+
 export default {
   name: 'LamboNumberInfoBi',
   components: { Trend },
@@ -117,7 +122,19 @@ export default {
     evaLevel: {
       type: String,
       default: ''
-    }
+    },
+    clickable: {
+      type: Boolean,
+      default: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
   },
   computed: {
     valueStyle() {
@@ -126,13 +143,60 @@ export default {
       };
     }
   },
+  data() {
+    return {
+      isActive: this.active
+    }
+  },
+  watch: {
+    active(newVal) {
+      this.isActive = newVal
+    }
+  },
   methods: {
     drill() {
       if (this.isDrill) {
         console.log("number-info 点击了下钻按钮")
         this.$emit('on-drill', {})
       }
+    },
+    handleCardClick() {
+      if (this.clickable) {
+        if (!this.isActive) {
+          this.activateCard()
+        }
+        console.log("num-info handleCardClick 卡片被点击，当前实例:", this.widget.id + "_" + this.widget.name)
+      }
+    },
+    // 激活卡片
+    activateCard() {
+      this.isActive = true
+
+      // 发布卡片激活事件
+      EventBus.$emit(EVENT_TYPES.NUM_IDX_ACTIVATED, {
+        widgetId: this.widget.id,
+        widgetName: this.widget.name,
+        options: this.widget.options,
+        instance: this
+      })
+    },
+    // 处理其他卡片激活事件
+    handleOtherCardActivated(eventData) {
+      // 如果是同一组且不是当前卡片，则取消激活
+      if (this.isActive === true && eventData.widgetId !== this.widget.id) {
+        this.isActive = false
+        console.log(`num-info handleOtherCardActivated 卡片 ${this.widget.id}_${this.widget.name} 因 ${eventData.widgetId}_${eventData.widgetName} 激活而取消激活`)
+      }
     }
+  },
+  mounted() {
+    // 监听卡片激活事件
+    EventBus.$on(EVENT_TYPES.NUM_IDX_ACTIVATED, this.handleOtherCardActivated)
+  },
+
+  beforeDestroy() {
+    // 组件销毁前移除事件监听
+    EventBus.$off(EVENT_TYPES.NUM_IDX_ACTIVATED, this.handleOtherCardActivated)
   }
 };
 </script>
@@ -184,4 +248,43 @@ export default {
   margin-right: -8px;
   border-top-right-radius: 6px;
 }
+
+// 重写卡片基础样式，添加点击效果
+.ivu-number-info {
+  cursor: default;
+
+  // 新增：可点击状态
+  &.card-clickable {
+    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>