@bdsoft/element 1.1.0 → 1.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bdsoft/element",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "main": "index.js",
   "scripts": {
@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "element-plus": "^2.11.5",
+    "@element-plus/icons-vue": "^2.3.2",
+    "element-plus": "2.13.1",
     "splitpanes": "4.0.4"
   }
 }

package/src/assets/css/element.scss

@@ -27,106 +27,123 @@
 }
 
 // tab样式重写--圆滑风格
-.bdtabs .el-tabs__header {
-  margin: 0px !important;
-  height: 34px !important;
-  .el-tabs__nav-wrap {
-    margin-bottom: -3px;
-  }
-  .el-tabs__nav {
-    border: 0px !important;
-  }
-  .el-tabs__item {
-    padding: 0 10px;
-    height: 30px !important;
-    border-style: solid;
-    border-color: transparent !important;
-  }
-  .is-active {
-    background: #e5eeff !important;
-    z-index: 1;
+.bdtabs.el-tabs {
+  & > .el-tabs__header {
+    margin: 0px !important;
+    height: 34px !important;
+    .el-tabs__nav-wrap {
+      margin-bottom: -3px;
+    }
+    .el-tabs__nav {
+      border: 0px !important;
+    }
+    .el-tabs__item {
+      padding: 0 10px;
+      height: 30px !important;
+      border-style: solid;
+      border-color: transparent !important;
+    }
+    .is-active {
+      background: #e5eeff !important;
+      z-index: 1;
 
-    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTEwMC4yMzYgOTkuODgzQzQ1LjAwOCAxMDAuMDEyLjEzMiA1NS4zNDQuMDAzLjExN2wuMjMzIDEwMCAxMDAtLjIzNHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3Ii8+PHBhdGggZD0iTS0uNjM4IDcuMzEyYy4xMiAwIC4yMTguMDU4LjQ3Ny4xMi4yMzIuMDU0LjI3My4wMzQuMzU4LjExOS4wODQuMDg0LjM1NyAwIC40NzYgMGguMzU4TTI4LjkyMSA2OS4wNTJ2LjU5Nk0yOC45MjEgNjguNDU3aC4xMTl2MS43ODhoLS4xMTl6TTM2LjY2OSA1MS4yOTNoMTkuMDd2NC44ODdoLTE5LjA3eiIgc3Ryb2tlPSJudWxsIi8+PC9zdmc+),
-      url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3IiBkPSJNNjkuOTU0LjE0Yy0uMjI5IDU1LjIyOC00NS4xODYgOTkuODE0LTEwMC40MTMgOTkuNTg1bDk5Ljk5OS40MTRMNjkuOTU0LjE0eiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNLS42MzggNy4zMTJjLjEyIDAgLjIxOC4wNTguNDc3LjEyLjIzMi4wNTQuMjczLjAzNC4zNTguMTE5LjA4NC4wODQuMzU3IDAgLjQ3NiAwaC4zNThNMjguOTIxIDY5LjA1MnYuNTk2TTI4LjkyMSA2OC40NTdoLjExOXYxLjc4OGgtLjExOXpNMzYuNjY5IDUxLjI5M2gxOS4wN3Y0Ljg4N2gtMTkuMDd6IiBzdHJva2U9Im51bGwiLz48L3N2Zz4=),
-      url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHJ4PSI4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjhFQUU3Ii8+PC9zdmc+);
-    -webkit-mask-size:
-      18px 30px,
-      20px 30px,
-      calc(100% - 30px) calc(100% + 17px);
-    -webkit-mask-position:
-      right bottom,
-      left bottom,
-      center top;
-    -webkit-mask-repeat: no-repeat;
-    .el-dropdown span {
-      color: #0256ff !important;
-      margin-left: 10px;
+      -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTEwMC4yMzYgOTkuODgzQzQ1LjAwOCAxMDAuMDEyLjEzMiA1NS4zNDQuMDAzLjExN2wuMjMzIDEwMCAxMDAtLjIzNHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3Ii8+PHBhdGggZD0iTS0uNjM4IDcuMzEyYy4xMiAwIC4yMTguMDU4LjQ3Ny4xMi4yMzIuMDU0LjI3My4wMzQuMzU4LjExOS4wODQuMDg0LjM1NyAwIC40NzYgMGguMzU4TTI4LjkyMSA2OS4wNTJ2LjU5Nk0yOC45MjEgNjguNDU3aC4xMTl2MS43ODhoLS4xMTl6TTM2LjY2OSA1MS4yOTNoMTkuMDd2NC44ODdoLTE5LjA3eiIgc3Ryb2tlPSJudWxsIi8+PC9zdmc+),
+        url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3IiBkPSJNNjkuOTU0LjE0Yy0uMjI5IDU1LjIyOC00NS4xODYgOTkuODE0LTEwMC40MTMgOTkuNTg1bDk5Ljk5OS40MTRMNjkuOTU0LjE0eiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNLS42MzggNy4zMTJjLjEyIDAgLjIxOC4wNTguNDc3LjEyLjIzMi4wNTQuMjczLjAzNC4zNTguMTE5LjA4NC4wODQuMzU3IDAgLjQ3NiAwaC4zNThNMjguOTIxIDY5LjA1MnYuNTk2TTI4LjkyMSA2OC40NTdoLjExOXYxLjc4OGgtLjExOXpNMzYuNjY5IDUxLjI5M2gxOS4wN3Y0Ljg4N2gtMTkuMDd6IiBzdHJva2U9Im51bGwiLz48L3N2Zz4=),
+        url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHJ4PSI4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjhFQUU3Ii8+PC9zdmc+);
+      -webkit-mask-size: 18px 30px, 20px 30px, calc(100% - 30px) calc(100% + 17px);
+      -webkit-mask-position: right bottom, left bottom, center top;
+      -webkit-mask-repeat: no-repeat;
+      .el-dropdown span {
+        color: #0256ff !important;
+        margin-left: 10px;
+      }
     }
   }
 }
 // tab样式重写--卡片风格
-.bdtabs2 .el-tabs__header {
-  margin: 0px !important;
-  height: 34px !important;
-  .el-tabs__nav-wrap {
-    margin-bottom: -3px;
-  }
-  .el-tabs__nav {
-    border: 0px !important;
-  }
-  .el-tabs__item {
-    padding: 0 10px;
-    height: 28px !important;
-    border: 1px solid #d9d9d9;
-    margin-left: 4px;
-    margin-top:2px;
-    margin-bottom:2px;
-    // border-color: transparent !important;
-  }
-  .is-active {
-    background: #e5eeff !important;
-    z-index: 1;
+.bdtabs2.el-tabs {
+  & > .el-tabs__header {
+    margin: 0px !important;
+    height: 34px !important;
+    .el-tabs__nav-wrap {
+      margin-bottom: -3px;
+    }
+    .el-tabs__nav {
+      border: 0px !important;
+    }
+    .el-tabs__item {
+      padding: 0 10px;
+      height: 28px !important;
+      border: 1px solid #d9d9d9;
+      margin-left: 4px;
+      margin-top: 2px;
+      margin-bottom: 2px;
+      // border-color: transparent !important;
+    }
+    .is-active {
+      background: #e5eeff !important;
+      z-index: 1;
 
- 
-    .el-dropdown span {
-      color: #0256ff !important;
-      margin-left: 10px;
+      .el-dropdown span {
+        color: #0256ff !important;
+        margin-left: 10px;
+      }
     }
   }
 }
 
 // tab样式重写--灵动风格
-.bdtabs3 .el-tabs__header {
-  margin: 0px !important;
-  height: 34px !important;
-  .el-tabs__nav-wrap {
-    margin-bottom: -3px;
-  }
-  .el-tabs__nav {
-    border: 0px !important;
-  }
-  .el-tabs__item {
-    padding: 0 10px;
-    height: 28px !important;
-    border: 0px solid #d9d9d9;
-    // margin-left: 4px;
-    // margin-top:2px;
-    // margin-bottom:2px;
-    // border-color: transparent !important;
-  }
-  .is-active {
-    background: #e5eeff !important;
-    z-index: 1;
+.bdtabs3.el-tabs {
+  & > .el-tabs__header {
+    margin: 0px !important;
+    height: 34px !important;
+    .el-tabs__nav-wrap {
+      margin-bottom: -3px;
+    }
+    .el-tabs__nav {
+      border: 0px !important;
+    }
+    .el-tabs__item {
+      padding: 0 10px;
+      height: 28px !important;
+      border: 0px solid #d9d9d9;
+      // margin-left: 4px;
+      // margin-top:2px;
+      // margin-bottom:2px;
+      // border-color: transparent !important;
+    }
+    .is-active {
+      background: #e5eeff !important;
+      z-index: 1;
 
- 
-    .el-dropdown span {
-      color: #0256ff !important;
-      margin-left: 10px;
+      .el-dropdown span {
+        color: #0256ff !important;
+        margin-left: 10px;
+      }
     }
   }
 }
+// tab样式重写--顶部线条风格
+.bdtabs4.el-tabs {
+  & > .el-tabs__header {
+    border-bottom: 1px solid #e4e7ed !important;
+     .el-tabs__nav {
+      border-right: 1px solid #fff;
+      border-left: 1px solid #fff;
+    }
 
-
+    .el-tabs__item {
+      border-top: 1px solid #fff;
+      border-left: 1px solid #fff;
+      border-right: 1px solid #fff;
+    }
+    .is-active {
+      border-top: 2px solid #409eff !important;
+      border-left: 1px solid #e4e7ed !important;
+      border-right: 1px solid #e4e7ed !important;
+    }
+  }
+}
 // 分割线样式
 .bddivider > .el-drawer__body > .el-divider--horizontal {
   border-top: 1px solid #e5eeff !important;

package/src/components/countup/countUp.js

@@ -95,9 +95,9 @@ var CountUp = function (target, startVal, endVal, decimals, duration, options) {
     self.printValue = function (value) {
       var result = self.formattingFn(value)
   
-      if (self.d.tagName === 'INPUT') {
+      if (self.d?.tagName === 'INPUT') {
         this.d.value = result
-      } else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
+      } else if (self.d?.tagName === 'text' || self.d?.tagName === 'tspan') {
         this.d.textContent = result
       } else {
         this.d.innerHTML = result

package/src/components/countup/index.vue

@@ -8,12 +8,16 @@
 <script setup>
 import { ref, reactive, nextTick, watch, onMounted } from "vue";
 import { CountUp } from './countUp.js'
-
 const props = defineProps({
   idName: {
     type: String,
     default: ''
   },
+  // 标题显示
+  title: {
+    type: String,
+    default: ''
+  },
   startVal: {
     type: Number,
     default: 0
@@ -28,7 +32,7 @@ const props = defineProps({
   },
   color: {
     type: String,
-    default: '#fff' // D9524E
+    default: '#3b3a3a' // D9524E
   },
   introText: {
     type: String,
@@ -51,9 +55,7 @@ const props = defineProps({
     default: 500
   }
 })
-const className= ref('')
-// const countUpRef = ref(null)
-// const countUp = new CountUp(countUpRef.value, props.endVal
+const className = ref('')
 
 function transformValue (val) {
   let endVal = 0
@@ -88,7 +90,7 @@ onMounted(() => {
 
       const res = transformValue(props.endVal)
       const endVal = props.endVal // res.val
-
+      let idname = props.idName  
       demo = new CountUp(props.idName, props.startVal, endVal, props.decimals, props.duration, props.options)
       if (!demo.error) {
         demo.start()
@@ -100,13 +102,13 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <div :class="className" :style="{ textAlign: 'center', color: color, fontSize: countSize, fontWeight: countWeight,fontFamily:'PingFang SC' }">
+    <div v-if="title" style="color: #606266;">{{ title }}</div>
+    <div :class="className"
+      :style="{ textAlign: 'center', color: color, fontSize: countSize, fontWeight: countWeight, fontFamily: 'PingFang SC' }">
       <span v-cloak :id="idName">{{ startVal }}</span>
     </div>
     <slot name="intro"></slot>
   </div>
 </template>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

package/src/components/notice/NoticeList.vue

@@ -6,7 +6,7 @@
 * @LastEditTime: 最后更新时间
 -->
 <script setup>
-import { ref, computed, watch, onMounted, defineEmits, nextTick } from 'vue'
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
 const emits = defineEmits(['liClick'])
 const props = defineProps({
   imgNum: {

package/src/components/notice/NoticeListPaging.vue

@@ -6,7 +6,7 @@
 * @LastEditTime: 最后更新时间
 -->
 <script setup>
-import { ref, computed, watch, onMounted, defineEmits } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { parseTime } from '../../utils/index.js'
 const emits = defineEmits(['liClick', 'liRightClick', 'pageChange', 'titleSearch', 'addNew'])
 const props = defineProps({

package/src/components/notice/NoticeView.vue

@@ -41,7 +41,7 @@
   </div>
 </template>
 <script setup>
-import { defineComponent, ref, reactive, computed, watch, onMounted, inject, nextTick, onBeforeMount, onUnmounted, defineEmits } from 'vue'
+import { defineComponent, ref, reactive, computed, watch, onMounted, inject, nextTick, onBeforeMount, onUnmounted } from 'vue'
 const emits = defineEmits([])
 const props = defineProps({
   bdsdk: {

package/src/components/pagination/index.vue

@@ -13,7 +13,7 @@
   
   <script setup>
   import { scrollTo } from './scroll-to.js';
-  import {computed, defineEmits } from 'vue';
+  import {computed } from 'vue';
   
   const emits = defineEmits(['update:page', 'update:pageSize', 'pagination']);
   

package/src/components/screenfull/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bdsoft/element-screenfull",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/index.js

@@ -13,6 +13,10 @@ import BdLayout4 from './components/layout/layout4.vue'
 import HeadSearch from './xm_components/HeadSearch/index.vue'
 // 里程碑组件
 import Milestone from './xm_components/Milestone/index.vue'
+// 多维数据统计组件
+import StatisticalCard from './xm_components/StatisticalCard/index.vue'
+// 多数据指标统计
+import MultiStatisticalCard from './xm_components/MultiStatisticalCard/index.vue'
 import BDCarousel from './components/carousel/index.vue'
 import BdFormItem from './components/form/FormItem.vue'
 import BdForm from './components/form/Form.vue'
@@ -65,6 +69,8 @@ export {
     BdLayout4,
     HeadSearch,
     Milestone,
+    StatisticalCard,
+    MultiStatisticalCard,
     BdEmpty,
     BdInvalid,
     BDCarousel,

package/src/xm_components/HeadSearch/readme.md

@@ -1,6 +1,6 @@
 
-## 使用说明 
-
+## 搜索框使用说明 
+功能: 首页搜索框 带搜索历史记录功能
 >>> 注意：
 ```
 import {HeadSearch} from '@bdsoft/element'

package/src/xm_components/MultiStatisticalCard/index.vue

@@ -0,0 +1,114 @@
+<!--
+* @FileDescription:  核心指标统计组件
+* @Author: 李兵泉
+* @Date: 2025-11-26 
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<template>
+  <el-row :gutter="0" class="basicwarp" :style="{ height: height }">
+    <!-- 动态渲染指标项 valueColor-->
+    <el-col
+      v-for="(item, index) in indicators"
+      :key="index"
+      @click="handleIndicatorClick(item, index)"
+      :md="item.colSize || 4"
+      class="text-center mb-4"
+      style="cursor: pointer"
+    >
+      <BdCountUp
+        class="infor-intro-num user-created-count"
+        :title="item.title"
+        :id-name="item.key"
+       
+        :endVal="item.value"
+        countSize="30px"
+        :color="item.valueColor || ''"
+        :countWeight="700"
+        @click="handleItemClick(item, index)"
+      >
+      </BdCountUp>
+    </el-col>
+  </el-row>
+</template>
+<script setup>
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
+// import { useTransition } from '@vueuse/core'
+import BdCountUp from '../../components/countup/index.vue'
+
+// 定义自定义事件，用于向父组件传递点击信息
+const emit = defineEmits(['indicator-click'])
+// 存储每个指标的过渡值
+const indicatorValues = ref({})
+// 组件props定义
+const props = defineProps({
+  height: {
+    type: String,
+    default: '200px'
+  },
+  // 指标数据列表
+  indicators: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const handleItemClick = (item, index) => {
+  // 触发自定义事件，传递点击的指标项数据和索引
+  if (item.onClick) {
+    item.onClick(item, index)
+  }
+}
+// 处理指标项点击事件
+const handleIndicatorClick = (item, index) => {
+  // 触发自定义事件，传递点击的指标项数据和索引
+  emit('indicator-click', {
+    item, // 点击的指标项完整数据
+    index // 点击的指标项索引
+  })
+}
+
+watch(
+  () => props.indicators,
+  (newIndicators) => {
+    if (newIndicators && newIndicators.length > 0) {
+      // nextTick(() => {
+      //   props.indicators.forEach(item => {
+      //     indicatorValues.value[item.key] = useNumberTransition(ref(0), {
+      //       duration: item.duration || 1000,
+      //     })
+      //   })
+      // });
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// 初始化过渡动画
+onMounted(() => {})
+</script>
+
+<style lang="scss" scoped>
+.basicwarp {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+:deep(.el-statistic__head) {
+  font-size: 17px;
+  text-align: center;
+  color: #737070 !important;
+}
+
+:deep(.el-statistic__content) {
+  font-size: 28px;
+  text-align: center;
+  font-weight: 600;
+  color: #737070 !important;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+</style>

package/src/xm_components/MultiStatisticalCard/readme.md

@@ -0,0 +1,29 @@
+## 多指标显示组件
+
+<template>
+  <MultiStatisticalCard :indicators="indicators" ></MultiStatisticalCard>
+</template>
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from "vue";
+import { MultiStatisticalCard } from '@bdsoft/element'
+
+const indicators = [
+{ key: 'oil_prod_cum', title: '累计油量(t)', valueColor:'red',value: 5656 },
+{ key: 'bncl', title: '本年产量(t)', valueColor:'red',value: 16 },
+{ key: 'sncl', title: '上年产量(t)',valueColor:'red', value: 116 },
+// { key: 'sncl2', title: '上年产量(t)', valueColor:'red',value: 116 },
+{ key: 'zrcl', title: '昨日产量(t)',valueColor:'red', value: 2346 }
+]
+</script>
+
+### 触发点击事件
+
+<MultiStatisticalCard :indicators="indicators" @indicator-click="handleClick"></MultiStatisticalCard>
+
+ <script setup>
+const handleClick = (data) => {
+  console.log('点击了指标项：', data.item);
+  console.log('指标项索引：', data.index);
+  // 处理点击逻辑
+};
+</script>

package/src/xm_components/StatisticalCard/index.vue

@@ -0,0 +1,196 @@
+<!--
+* @FileDescription:  统计组件
+* @Author: 李兵泉
+* @Date: 2025-11-26 
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<template>
+  <!-- 投资总额卡片容器 -->
+  <div
+    class="investment-card"
+    :style="{ width: width }"
+    v-if="_datas && _datas != ''"
+  >
+    <!-- 循环渲染数据项（空数据则不显示） -->
+    <div class="data-item">
+      <!-- 标题行（带提示图标） -->
+      <div class="title-row">
+        <span class="title">{{ _datas[0]?.title }}</span>
+        <el-tooltip v-if="tip" :content="tip" placement="top">
+          <el-icon size="16px" class="info-icon"><question-filled /></el-icon>
+        </el-tooltip>
+      </div>
+      <!-- 数值行 -->
+      <div
+        class="value"
+        :style="{
+          color: _datas[0]?.valueColor || '#000',
+          cursor: _datas[0]?.onClick ? 'pointer' : 'default',
+        }"
+        @click="handleItemClick(_datas[0], 0)"
+      >
+        {{ _datas[0]?.value }}
+      </div>
+    </div>
+    <div style="display: flex" @click="handleItemClick(_datas[1], 1)">
+      <!-- 数组 up2 -->
+      <div v-if="_datas[1]" class="extra-row">
+        <span class="extra-item">
+          {{ _datas[1]?.title }}
+          <span :class="['trend', _datas[1]?.trend === 'up' ? 'up' : 'down']">
+            {{ _datas[1]?.value }}
+            <el-icon class="trend-icon">
+              <component
+                :is="_datas[1]?.trend === 'up' ? 'caret-top' : 'caret-bottom'"
+              />
+            </el-icon>
+          </span>
+        </span>
+      </div>
+      <!-- 数组 down3 -->
+      <div
+        v-if="_datas[2]"
+        class="extra-row"
+        style="margin-left: 10%"
+        @click="handleItemClick(_datas[2], 2)"
+      >
+        <span class="extra-item">
+          {{ _datas[2]?.title }}
+          <span :class="['trend', _datas[2]?.trend === 'up' ? 'up' : 'down']">
+            {{ _datas[2]?.value }}
+            <el-icon class="trend-icon">
+              <component
+                :is="_datas[2]?.trend === 'up' ? 'caret-top' : 'caret-bottom'"
+              />
+            </el-icon>
+          </span>
+        </span>
+      </div>
+    </div>
+    <el-divider style="margin: 10px 0" />
+    <div
+      v-if="_datas[3]"
+      class="extra-row"
+      @click="handleItemClick(_datas[3], 3)"
+    >
+      <span class="extra-item" style="color: #595858">
+        {{ _datas[3]?.title }}
+        <span class="trend">
+          {{ _datas[3]?.value }}
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const _datas = ref([]);
+// 接收父组件传入的4组数据（数组，每个对象对应一组数据）
+const props = defineProps({
+  // 组件默认宽度
+  width: {
+    type: String,
+    default: "350px",
+  },
+  // 右上角提示信息
+  tip: {
+    type: String,
+    default: "",
+  },
+  // 数据列表 格式参考readme
+  dataList: {
+    type: Array,
+    default: () => [],
+  },
+});
+const handleItemClick = (item, index) => {
+  // 触发自定义事件，传递点击的指标项数据和索引
+  if (item && item.onClick) {
+    item.onClick(item, index);
+  }
+};
+watch(
+  () => props.dataList,
+  (newVal) => {
+    if (newVal && newVal.length > 0) {
+      _datas.value = newVal;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
+<style scoped>
+.investment-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.data-item {
+  margin-bottom: 12px;
+}
+
+.title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  color: #666;
+  font-size: 14px;
+}
+
+.info-icon {
+  cursor: pointer;
+  color: #999;
+}
+
+.value {
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.extra-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.extra-item {
+  display: flex;
+  align-items: center;
+  color: #999;
+}
+
+.trend {
+  margin-left: 4px;
+}
+
+.trend.up {
+  color: #f56c6c;
+  /* 红色-上升 */
+}
+
+.trend.down {
+  color: #67c23a;
+  /* 绿色-下降 */
+}
+
+.trend-icon {
+  font-size: 12px;
+  margin-left: 2px;
+}
+
+.additional {
+  font-size: 14px;
+  color: #666;
+}
+</style>

package/src/xm_components/StatisticalCard/readme.md

@@ -0,0 +1,41 @@
+## 统计数组组件
+
+```
+
+<template>
+  <StatisticalCard :dataList="dataList" tip="投资总额说明111"></StatisticalCard>
+</template>
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from "vue";
+import { StatisticalCard } from '@bdsoft/element'
+
+const dataList = ref([
+  {
+    title: '总用户数',
+    value: 1024,
+    valueColor:'red',
+    trend: '',
+  },
+  {
+    title: '活跃用户数',
+    value: 768,
+    valueColor:'',
+    trend: 'up',
+  },
+  {
+    title: '新增用户数',
+    value: 256,
+    valueColor:'',
+    trend: 'down',
+  },
+  {
+    title: '付费用户数',
+    value: 128,
+    valueColor:'',
+    trend: ''
+  }
+]);
+</script>
+
+<style lang="scss" scoped></style>
+```

package/utils/message.js

@@ -61,28 +61,23 @@ export function showconfirm(done, confirmtitle = '确认关闭?', showtext = { t
 
 /**
  * 信息提示框
- * @param {*} msg 
- * @param {*} type 
- * @param {*} title 
- * @param {*} position 
- * @param {*} dangerouslyUseHTMLString 
+ * @param {*} msg
+ * @param {*} type
+ * @param {*} title
+ * @param {*} position
+ * @param {*} dangerouslyUseHTMLString
  */
-export function shownotiinfo(msg, type = 'info',title='提示',position='bottom-right',dangerouslyUseHTMLString=false) {
+export function shownotiinfo(msg, type = 'info', title = '提示', position = 'bottom-right', dangerouslyUseHTMLString = false) {
   ElNotification({
     title: title,
     position: position,
     message: msg,
-    dangerouslyUseHTMLString:dangerouslyUseHTMLString,
+    dangerouslyUseHTMLString: dangerouslyUseHTMLString,
     type: type
   })
 }
 
-export function showconfirminfo(
-  msg = '确认删除？',
-  showtext = { type: '', position: 'bottom-right', title: '提示', dangerouslyUseHTMLString: true },
-  fn1,
-  fn2
-) {
+export function showconfirminfo(msg = '确认删除？', showtext = { type: '', position: 'bottom-right', title: '提示', dangerouslyUseHTMLString: true }, fn1, fn2) {
   // 按钮
   const btn1 = h(ElButton, {
     innerText: '立即刷新',
@@ -138,7 +133,6 @@ export function confirm(confirmtitle = '确认关闭?') {
   return ElMessageBox.confirm(confirmtitle)
 }
 
-
 export function showloading(msg, duration = 0, showClose = true) {
   ElMessage({
     // <svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg>
@@ -151,12 +145,16 @@ export function showloading(msg, duration = 0, showClose = true) {
 
 // loading加载 closeLoading
 let loadingObj = null
-export function showLoading(msg) {
+export function showLoading(msg, parm) {
+  let _parm = parm || {}
   loadingObj = ElLoading.service({
+    // 默认配置
     lock: true,
-    text: msg || '加载中...',
+    text: '加载中...',
     spinner: 'el-icon-loading',
-    background: 'rgba(0, 0, 0, 0.7)'
+    background: 'rgba(0, 0, 0, 0.7)',
+    // 展开 _parm，其属性会覆盖上面的默认配置
+    ..._parm
   })
 }