lambo-design-bi 0.0.182 → 0.0.184

package/bi/widget/charts/index.vue

@@ -107,7 +107,7 @@ export default {
               if (rows && rows.length > 0) {
                 let rowData = rows[0]
                 if(rowData && Object.prototype.hasOwnProperty.call(rowData, "val")){
-                  this.chartsNote = rowData["val"]
+                  this.chartsNote = rowData["val"] || ''
                 }
               }
             } else {

package/bi/widget/num/index.vue

@@ -1,6 +1,6 @@
 <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">
+  <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>
 <script>
@@ -41,7 +41,8 @@ export default {
       drillK2: null,
       drillV2: null,
       drillK3: null,
-      dirllV3: null
+      dirllV3: null,
+      evaLevel: null
     }
   },
   methods: {
@@ -90,6 +91,9 @@ export default {
                 this.drillK3 = row['drill_k3'] || ''
                 this.drillV3 = row['drill_v3'] || ''
               }
+              if (Object.prototype.hasOwnProperty.call(row, 'eva_level')) {
+                this.evaLevel = row['eva_level'] || ''
+              }
             }
           }
         }

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/bi/widget/util/widget-map.js

@@ -8,7 +8,7 @@ import BiRow2 from "../layout/row2.vue"
 import BiCol from "../layout/col.vue"
 import BiDetailTable from "../table/detail-table.vue"
 import BiCharts from "../charts/index.vue"
-import BiTextGroup from '../text/text-group.vue';
+import BiTextGroup from '../text/text-group.vue'
 
 /**
  * Strictly define the order to prevent circular references. For component reuse, copy new components instead of direct references.

package/package.json

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

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

@@ -1,158 +1,290 @@
-<template>
-  <div class="ivu-number-info">
-    <div class="ivu-number-info-title-lambo title-div" :class="{ 'isDrill': isDrill }" v-if="title || $slots.title"
-      @click="drill">
-      <slot name="title">{{ title }}</slot>
-      <Icon v-if="isDrill" type="ios-redo-outline" />
-    </div>
-    <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>
-              </template>
-              <template v-else>
-                <Trend :flag="trend1" text-color>{{ subNum1 }}</Trend>
-              </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>
-              <template v-else>
-                <Trend :flag="trend2" text-color>{{ subNum2 }}</Trend>
-              </template>
-            </template>
-            <template v-else>
-              {{ subNum2 }}
-            </template>
-          </template>
-        </slot>
-      </span>
-    </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'
-
-export default {
-  name: 'LamboNumberInfoBi',
-  components: { Trend },
-  props: {
-    title: {
-      type: String
-    },
-    subTitle: {
-      type: String,
-      default: ''
-    },
-    num: {
-      type: [String, Number]
-    },
-    subNum1: {
-      type: [String, Number]
-    },
-    trend1: {
-      validator(value) {
-        return oneOf(value, ['up', 'down']);
-      }
-    },
-    polar1: {
-      type: String,
-      required: false,
-      validator(value) {
-        return !value || ['pos', 'neg'].includes(value);
-      }
-    },
-    subNum2: {
-      type: [String, Number]
-    },
-    trend2: {
-      validator(value) {
-        return oneOf(value, ['up', 'down']);
-      }
-    },
-    polar2: {
-      type: String,
-      required: false,
-      validator(value) {
-        return !value || ['pos', 'neg'].includes(value);
-      }
-    },
-    gap: {
-      type: [String, Number],
-      default: 6
-    },
-    isDrill: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    valueStyle() {
-      return {
-        'margin-top': this.gap + 'px'
-      };
-    }
-  },
-  methods: {
-    drill() {
-      if (this.isDrill) {
-        console.log("number-info 点击了下钻按钮")
-        this.$emit('on-drill', {})
-      }
-    }
-  }
-};
-</script>
-<style scoped lang="less">
-.ivu-number-info-value-lambo {
-  margin-top: 4px;
-  overflow: hidden;
-  font-size: 0;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  display: flex;
-  flex-direction: column;
-}
-
-.ivu-number-info-title-lambo {
-  margin-bottom: 9px;
-  color: #17233d;
-  font-size: 16px;
-  -webkit-transition: all .2s;
-  transition: all .2s
-}
-
-.title-div {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: all 0.2s ease;
-  border-radius: 5px;
-}
-
-.title-div.isDrill {
-  cursor: pointer;
-}
-
-.title-div.isDrill:hover {
-  transform: scale(1.02);
-}
-</style>
+<template>
+  <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">
+        <Icon v-if="isDrill" type="ios-redo-outline" />
+
+        <img class="badge-img" v-if="evaLevel == 'high'"
+          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M32 0 L32 32 L0 0 Z' fill='%2321DA2E'/%3E%3Ctext x='24' y='12' font-size='12' font-weight='bold' text-anchor='end' fill='white' font-family='system-ui, sans-serif'%3E优%3C/text%3E%3C/svg%3E"
+          alt="优">
+        <img class="badge-img" v-if="evaLevel == 'mid'"
+          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M32 0 L32 32 L0 0 Z' fill='%231E58F8'/%3E%3Ctext x='24' y='12' font-size='12' font-weight='bold' text-anchor='end' fill='white' font-family='system-ui, sans-serif'%3E中%3C/text%3E%3C/svg%3E"
+          alt="中">
+        <img class="badge-img" v-if="evaLevel == 'low'"
+          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M32 0 L32 32 L0 0 Z' fill='%23ff9900'/%3E%3Ctext x='24' y='12' font-size='12' font-weight='bold' text-anchor='end' fill='white' font-family='system-ui, sans-serif'%3E低%3C/text%3E%3C/svg%3E"
+          alt="低">
+      </div>
+
+    </div>
+    <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>
+              </template>
+              <template v-else>
+                <Trend :flag="trend1" text-color>{{ subNum1 }}</Trend>
+              </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>
+              <template v-else>
+                <Trend :flag="trend2" text-color>{{ subNum2 }}</Trend>
+              </template>
+            </template>
+            <template v-else>
+              {{ subNum2 }}
+            </template>
+          </template>
+        </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 },
+  props: {
+    title: {
+      type: String
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    },
+    num: {
+      type: [String, Number]
+    },
+    subNum1: {
+      type: [String, Number]
+    },
+    trend1: {
+      validator(value) {
+        return oneOf(value, ['up', 'down']);
+      }
+    },
+    polar1: {
+      type: String,
+      required: false,
+      validator(value) {
+        return !value || ['pos', 'neg'].includes(value);
+      }
+    },
+    subNum2: {
+      type: [String, Number]
+    },
+    trend2: {
+      validator(value) {
+        return oneOf(value, ['up', 'down']);
+      }
+    },
+    polar2: {
+      type: String,
+      required: false,
+      validator(value) {
+        return !value || ['pos', 'neg'].includes(value);
+      }
+    },
+    gap: {
+      type: [String, Number],
+      default: 6
+    },
+    isDrill: {
+      type: Boolean,
+      default: false
+    },
+    evaLevel: {
+      type: String,
+      default: ''
+    },
+    clickable: {
+      type: Boolean,
+      default: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  computed: {
+    valueStyle() {
+      return {
+        'margin-top': this.gap + 'px'
+      };
+    }
+  },
+  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>
+<style scoped lang="less">
+.ivu-number-info-value-lambo {
+  margin-top: 4px;
+  overflow: hidden;
+  font-size: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: flex;
+  flex-direction: column;
+}
+
+.ivu-number-info-title-lambo {
+  margin-bottom: 9px;
+  color: #17233d;
+  font-size: 16px;
+  -webkit-transition: all .2s;
+  transition: all .2s
+}
+
+.title-div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all 0.2s ease;
+  border-radius: 5px;
+}
+
+.title-div.isDrill {
+  cursor: pointer;
+}
+
+.title-div.isDrill:hover {
+  transform: scale(1.02);
+}
+
+.cd-right-top {
+  display: flex;
+  justify-content: end;
+}
+
+.badge-img {
+  width: 32px;
+  height: 32px;
+  margin-top: -8px;
+  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>

package/pub/text/text-obj.vue

@@ -59,6 +59,6 @@ export default {
   padding: 20px 5px 15px 5px;
   border-radius: 5px;
   line-height: 1.6;
-  font-size: 14px;
+  font-size: 15px;
 }
 </style>