@bdsoft/element 1.1.13 → 1.1.14

package/src/xm_components/Milestone/index.vue

@@ -0,0 +1,213 @@
+<!--
+* @FileDescription:  里程碑组件
+* @Author: 李兵泉
+* @Date: 2025-10-30 
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+
+<template>
+  <div class="milestone-container">
+    <div class="milestone-track " v-if="milestones && milestones != ''">
+      <div v-for="(item, index) in milestones" :key="index" class="milestone-item"
+        :class="{ 'odd-item': index % 2 === 0, 'even-item': index % 2 !== 0 }" :style="{
+          left: `${calculatePosition(item.rq)}%`,
+          opacity: index === milestones.length - 1 && hideLast ? '0' : '1'
+        }">
+        <template v-if="index % 2 === 0">
+          <!-- 信息面板 -->
+          <div class="milestone-info">
+            <!-- <div class="milestone-date">{{ dayjs(item.rq).format('YYYY-MM-DD') }}</div> -->
+            <div class="milestone-name">{{ item.name }}</div>
+          </div>
+          <!-- 竖线连接 -->
+          <div class="milestone-line"></div>
+          <!-- 原点 -->
+          <div class="milestone-dot"></div>
+        </template>
+        <template v-else>
+          <!-- 原点 -->
+          <div class="milestone-dot"></div>
+          <!-- 竖线连接 -->
+          <div class="milestone-line"></div>
+          <!-- 信息面板 -->
+          <div class="milestone-info">
+            <div class="milestone-name">{{ item.name }}</div>
+            <!-- <div class="milestone-date">{{ dayjs(item.rq).format('YYYY-MM-DD') }}</div> -->
+
+          </div>
+        </template>
+      </div>
+      <div class="with-arrow"></div>
+    </div>
+    <BdEmpty v-else imgType="svg" :imgSize="50" des="没有查询到相关数据">
+
+    </BdEmpty>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+// import { dayjs } from '../../../index.js'
+import BdEmpty from '../../components/empty/empty.vue'
+// 接收父组件传递的里程碑数据 const bgColor = ref('#0ea5e9') // 0ea5e9
+const props = defineProps({
+  // 标注色
+  bgColor: {
+    type: String,
+    default: 'radial-gradient(circle, rgba(78, 171, 237, 1) 0%, rgb(81, 151, 244) 51%, rgba(78, 171, 237, 1) 100%)'
+  },
+  milestones: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  hideLast: {
+    type: Boolean,
+    default: true
+  }
+});
+
+// 计算是否显示终点箭头
+const showArrow = computed(() => !props.hideLast);
+
+// 计算每个节点的位置（基于起始日期的时间占比）
+const calculatePosition = (startDate) => {
+  if (props.milestones.length === 0) return 0;
+  const firstDate = new Date(props.milestones[0].rq);
+  const lastDate = new Date(props.milestones[props.milestones.length - 1].rq);
+  const currentDate = new Date(startDate);
+  const totalDays = (lastDate - firstDate) / (1000 * 60 * 60 * 24);
+  const daysPassed = (currentDate - firstDate) / (1000 * 60 * 60 * 24);
+  return (daysPassed / totalDays) * 100;
+};
+
+</script>
+
+<style lang="scss" scoped>
+$bgColor: v-bind(bgColor);
+
+.milestone-container {
+  width: 99%;
+  // padding: 100px 0;
+  /* 增加上下内边距给上下节点留出空间 */
+  position: relative;
+  display: flex;
+}
+
+.milestone-track {
+  width: calc(100% - 100px);
+  height: 14px;
+  margin: 0 auto;
+  background-color: #e5e7eb;
+  position: relative;
+  // 新增：为轨道右侧留出箭头空间
+  padding-right: 16px;
+  margin-right: calc(50px - 16px);
+  margin-top: 100px;
+
+  .with-arrow {
+    position: absolute;
+    right: -16px; // 定位到轨道最右侧
+    top: 0;
+    height: 1px;
+    // width: 16px;
+
+    top: 50%;
+    // left: 0;
+    transform: translateY(-50%); // 垂直居中
+    // 使用边框实现实心三角形箭头
+    border-top: 13px solid transparent;
+    border-bottom: 13px solid transparent;
+    border-left: 22px solid#e5e7eb;
+    /* 箭头颜色与主题色一致 */
+    z-index: 999;
+  }
+}
+
+.milestone-item {
+  position: absolute;
+  // background-color: rgba(255, 0, 0, 0.285);
+  left: 0;
+  top: 0;
+  transform: translateX(-50%);
+  /* 只水平居中，垂直位置由odd/even控制 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+// 基数项（0,2,4...）在轨道上方
+.odd-item {
+  top: -44px;
+
+  .milestone-info {
+    transform: translateY(calc(-100% - 1px));
+    /* 信息面板在原点上方 */
+  }
+}
+
+// 偶数项（1,3,5...）在轨道下方
+.even-item {
+  top: -3px;
+
+  .milestone-info {
+    transform: translateY(calc(100% + 2px));
+    /* 信息面板在原点下方 */
+  }
+}
+
+// 竖线连接
+.milestone-line {
+  width: 2px;
+  background: $bgColor;
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+}
+
+// 基数项竖线向上
+.odd-item .milestone-line {
+  height: 50px;
+  bottom: 10px;
+  /* 从原点中心向上延伸 */
+  // transform: translateY(100%);
+}
+
+// 偶数项竖线向下
+.even-item .milestone-line {
+  height: 50px;
+  top: 10px;
+  /* 从原点中心向下延伸 */
+}
+
+.milestone-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  // background-color: #1652f8 ; // 
+  background: $bgColor;
+  position: relative;
+  z-index: 2;
+  /* 确保原点在轨道上方 */
+}
+
+.milestone-info {
+  text-align: center;
+  white-space: nowrap;
+  /* 防止文本换行 */
+}
+
+.milestone-date {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.milestone-name {
+  font-size: 15px;
+  color: #666;
+  font-weight: bold;
+}
+</style>

package/src/xm_components/Milestone/readme.md

@@ -0,0 +1,15 @@
+## 里程碑组件
+
+注意：最后一个时间为虚拟时间不显示，进行定位使用
+
+import {Milestone} from '@bdsoft/element'
+ <Milestone  :milestones="milestoneData" :hide-last="true"></Milestone >
+
+ const milestoneData = [
+  { rq: '2018-7-5', name: '规划设计' },
+  { rq: '2018-7-10', name: '钻试' },
+  { rq: '2018-8-5', name: '测井' },
+  { rq: '2018-8-11', name: '完井' },
+  { rq: '2018-9-1', name: '投产' },
+  { rq: '2018-9-8', name: '' }
+];

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/src/xm_components/readme.md

@@ -0,0 +1 @@
+项目组件说明

package/vite.config.js

@@ -0,0 +1,58 @@
+import { defineConfig } from 'vite'
+import { fileURLToPath } from 'node:url'
+import { resolve } from 'path'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import vue from '@vitejs/plugin-vue'
+import importToConst from 'rollup-plugin-import-to-const'
+
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      'utils': fileURLToPath(new URL('./utils', import.meta.url)),
+      'global': fileURLToPath(new URL('./global', import.meta.url)),
+      '~': fileURLToPath(new URL('./src/assets', import.meta.url))
+    }
+  },
+  build: {
+    lib: {
+      entry: './index.js',
+      name: '@bdsoft/element',
+      fileName: 'BdElement', // 输出的包文件名
+      formats: ['es'] // 这是默认值 'umd','cjs', 
+    },
+    // outDir: 'esaaa', // 根输出目录
+    minify: false,
+    rollupOptions: {
+      //忽略打包vue文件
+      external: ['vue', 'element-plus', '@element-plus/icons-vue', 'vue/server-renderer', '@vue/server-renderer'], // 这里列出你想排除的外部依赖
+      output: [
+        {
+          //配置打包根目录
+          dir: 'dist',
+          globals: {
+            vue: 'Vue',
+            'element-plus': 'ElementPlus',
+            '@element-plus/icons-vue': 'ElementPlusIconVue'
+          },
+          esModule: true // 强制 ES 模块输出格式的兼容性
+        }
+      ]
+    },
+    // 优化依赖：提前预构建 dayjs，避免打包时解析错误
+    optimizeDeps: {
+      include: ['dayjs']
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        silenceDeprecations: ['legacy-js-api']
+      }
+    }
+  },
+  plugins: [vue(), vueJsx(), importToConst(), cssInjectedByJsPlugin()]
+})