@bdsoft/element 1.1.0

package/src/xm_components/HeadSearch/index.vue

@@ -0,0 +1,206 @@
+<!--
+* @FileDescription:  搜索组件  todo
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+
+<template>
+  <div class="search_warp">
+    <img :src="logoUrl" v-if="logoUrl"
+      style="width: 40px; height: 40px;margin-right: 5px; vertical-align: middle; cursor: pointer" alt=""
+      @click="gohome" />
+    <div class="ipt_search">
+      <el-input :placeholder="placeholderTxt" v-model="keyName" clearable @focus="focusfns(1)" @blur="focusfns(-1)"
+        @keyup.enter="debouncedClick">
+        <template #append>
+          <el-button class="SearchBtn" @click="debouncedClick" type="primary" icon="Search">搜索</el-button>
+        </template>
+      </el-input>
+      <!-- 搜索记录 -->
+      <div v-show="search_drop" class="search_drop" v-if="searchkeysArr && searchkeysArr != ''">
+        <ul>
+          <li v-for="(item, index) in searchkeysArr" :key="index">
+            <span class="search-item-text"  @click="setTxt(item)">{{ item }}</span>
+            <el-icon class="delete-btn"  @click.stop="deleteSearchItem(index)">
+              <Delete />
+            </el-icon>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+  </div>
+  <!-- 搜索记录 -->
+
+  <div v-if="groupData && groupData != ''" class="ipt_search_tip">
+    搜索结果数：
+    <span v-show="props.ismodule">{{ Object.keys(groupData).length }}个系统, </span>
+    {{ searchNum }} 个相关页面模块
+  </div>
+</template>
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { getUrlKey, debounce } from '../../../utils/func.js';
+
+const emits = defineEmits(['getSearchList']);
+//
+import useSearrch from './hook/hookSearch.js';
+// hook
+const { keyName, searchkeysArr, search_drop, getStorageKeys, focusfns, setSearchKeys, deleteSearchItem, setTxt } = useSearrch();
+
+const props = defineProps({
+  ismodule: {
+    type: Boolean,
+    default: false
+  },
+  // logo url
+  logoUrl: {
+    type: String,
+    // default: 'http://123.129.65.205:18012/RabbitDocService/Doc/ptIcon/View?filePath=20250911/006.png'
+  },
+  placeholderTxt: {
+    type: String,
+    default: '请输入搜索内容'
+  },
+  groupData: {
+    type: Object
+  },
+  searchNum: {
+    type: Number
+  }
+});
+// 跳转到首页搜索
+const gohome = () => {
+  // router.push('/');
+};
+onMounted(() => {
+  // 是否有限取浏览器中的值 isQueryFirst==>f
+  let keymc = getUrlKey('txtKey') || '';
+
+  setTxt(keymc);
+  // getModuleList(true);
+});
+
+/**
+ * 触发上层搜索 keyName
+ * 处理防抖
+ */
+const getModuleList = (isfirst = false) => {
+  focusfns(-1);
+  //   setCookieKey('searchKey', keyName.value);
+  setSearchKeys(keyName.value || '');
+  emits('getSearchList', keyName.value, isfirst);
+};
+// 防抖处理
+const debouncedClick = debounce(getModuleList, 500);
+
+defineExpose({
+  setTxt,
+  debouncedClick
+});
+</script>
+<style lang="scss" scoped>
+.search_warp {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ipt_search {
+  width: 700px;
+  height: 40px;
+  position: relative;
+
+  // 样式重写
+  :deep(.el-input__inner) {
+    height: 40px !important;
+    outline: none;
+  }
+
+  :deep(.el-input-group__append) {
+    background: linear-gradient(136deg, #286aff, #4e6ef2, #7274f9, #9f66ff);
+    // border: 1px solid #ffffff !important;
+    color: #fff;
+    height: 40px;
+    margin-top: 1px;
+    box-shadow: none;
+    font-size: 17px;
+    border-radius: 0 8px 8px 0;
+    border: 0;
+    outline-width: 0;
+  }
+
+  :deep(.el-button [class*='el-icon'] + span) {
+    vertical-align: 3px;
+  }
+}
+
+.ipt_search_tip {
+  margin-left: 50px;
+  color: #ccc;
+  font-size: 13px;
+}
+
+.search_drop {
+  position: absolute;
+  z-index: 99999;
+  width: 100%;
+  left: 2px;
+  max-width: 605px;
+  border: solid 1px #e4e7ed;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+
+  ul {
+    list-style: none;
+    padding: 6px 0;
+    margin: 0;
+    box-sizing: border-box;
+    text-align: left;
+
+    li {
+      font-size: 14px;
+      padding: 0 20px;
+      position: relative;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #606266;
+      height: 34px;
+      line-height: 34px;
+      box-sizing: border-box;
+      cursor: pointer;
+      position: relative;
+      padding-right: 50px; // 给删除按钮留出空间
+
+      .search-item-text {
+        display: inline-block;
+        width: calc(100% - 40px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .delete-btn {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 30px;
+        height: 24px;
+        padding: 0;
+        background: transparent;
+        color: #909399;
+
+        &:hover {
+          color: #f56c6c;
+          background: transparent;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/xm_components/HeadSearch/readme.md

@@ -0,0 +1,12 @@
+
+## 使用说明 
+
+>>> 注意：
+```
+import {HeadSearch} from '@bdsoft/element'
+
+<div class="search-area">
+        <!-- 搜索组件 -->
+        <HeadSearch @getSearchList="handleSearch"></HeadSearch>
+      </div>
+```

package/src/xm_components/Milestone/index.vue

@@ -0,0 +1,212 @@
+<!--
+* @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 'element-plus'
+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/readme.md

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

package/utils/coms/load.jsx

@@ -0,0 +1,10 @@
+function LoadComponent(props, { slots, emit, attrs }) {
+  return (
+    <div class="loadsvg" style="height:20px;width:20px;">
+      <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>
+    </div>
+  )
+}
+export default LoadComponent

package/utils/func.js

@@ -0,0 +1,32 @@
+import is from './type';
+
+/**
+ * 获取url参数
+ * @param {*} name
+ * @returns
+ */
+export function getUrlKey(name, url) {
+  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url || location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
+}
+
+// 生成guid
+function S4() {
+  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+}
+
+// 生成guid
+export function NewGuid() {
+  return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4()
+}
+
+// 创建一个防抖函数
+// const debouncedClick = debounce(handleQa, 500);
+export const debounce = (func, delay) => {
+  let timer
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func(...args)
+    }, delay)
+  }
+}

package/utils/hookDialog.js

@@ -0,0 +1,38 @@
+import { ref, nextTick } from 'vue'
+
+// 公共的Hook，用于管理对话框的显示和隐藏 用法如下：
+// import {useDialog} from '@bdsoft/element'
+// const { visible, showDialog,openParms,hideDialog } = useDialog()
+// defineExpose({
+//   showDialog,
+//   hideDialog
+// })
+// 自定义Hook，用于管理对话框的显示和隐藏
+export function useDialog(showFn) {
+  const visible = ref(false)
+  // 打开窗体传递的对象
+  const openParms = ref({})
+  const extParms = ref({}) // 扩展用
+  // 显示窗体
+  const showDialog = (parm,ext) => {
+    visible.value = true
+    openParms.value = parm
+    
+    extParms.value = ext
+    nextTick(() => {
+      showFn && showFn()
+    })
+  }
+  // 隐藏窗体
+  const hideDialog = () => {
+    visible.value = false
+  }
+
+  return {
+    visible,
+    openParms,
+    extParms,
+    showDialog,
+    hideDialog
+  }
+}

package/utils/hookPage.js

@@ -0,0 +1,49 @@
+// 分页hook函数 参考说明 components/Pagination/readme.md
+import { reactive, toRefs } from 'vue'
+
+export function usePage(changeFn) {
+  //
+
+  let page = reactive({
+    // 数据服务分页参数值
+    pageHeader: {
+      startindex: 0,
+      pagesize: 30,
+      carrytotal: true
+    },
+    currentPage: 1,
+    pageSizes: [30, 60, 90],
+    pageSize: 30,
+    total: 0
+  })
+
+  function handleSizeChange(val) {
+    page.pageSize = val
+    // page.pageHeader.mend = val
+    changeFn()
+  }
+  function handleCurrentChange(val) {
+    page.currentPage = val
+    page.pageHeader.startindex = val - 1
+    changeFn()
+  }
+  /**
+   *
+   * @param {*} pageobj  { page: currentPage.value, pageSize: val }
+   */
+  function handlePagination(pageobj) {
+    let pageIndex = pageobj.page
+    let pageSize = pageobj.pageSize
+    page.currentPage = pageIndex
+    page.pageSize = pageSize
+    page.pageHeader.startindex = (pageIndex - 1) * pageSize
+    page.pageHeader.pagesize = pageSize
+    changeFn()
+  }
+  return {
+    ...toRefs(page),
+    handleSizeChange,
+    handleCurrentChange,
+    handlePagination
+  }
+}

package/utils/index.js

@@ -0,0 +1,5 @@
+export * from './message.js'
+export * from './func.js'
+// export * from './usewerter.js'
+// export * from './filter.js'
+// export * from './bus.js'

package/utils/lib/console.js

@@ -0,0 +1,39 @@
+/**
+ * 格式化日志信息
+ * 
+ * @param {String} type - 日志类型，如 'tip' 或 'err'
+ * @param {String} msg - 日志消息内容
+ * @param {Object} rule - 可选参数，与日志相关的规则对象
+ * @returns {String} - 返回格式化后的日志字符串
+ */
+export function format(type, msg, rule) {
+    // 使用模板字符串构建日志信息，包含日志类型和消息内容
+    let logMsg = `[form-create ${type}]: ${msg}`;
+    // 如果提供了规则对象，则将其转换为JSON字符串并添加到日志信息中
+    if (rule) {
+        logMsg += `\n\nrule: ${JSON.stringify(rule.getRule ? rule.getRule() : rule)}`;
+    }
+    // 返回格式化后的日志字符串
+    return logMsg;
+}
+
+/**
+ * 输出格式化的提示信息到控制台
+ * 
+ * @param {String} msg - 提示信息的内容
+ * @param {Object} rule - 可选参数，与提示信息相关的规则对象
+ */
+export function tip(msg, rule) {
+    // 使用 format 函数格式化提示信息，并通过 console.warn 输出到控制台
+    console.warn(format('tip', msg, rule));
+}
+
+
+export function err(msg, rule) {
+    console.error(format('err', msg, rule));
+}
+
+export function logError(e) {
+    err(e.toString());
+    console.error(e);
+}

package/utils/lib/debounce.js

@@ -0,0 +1,19 @@
+/**
+ * 防抖函数，用于限制函数的执行频率。
+ * 
+ * @param {Function} fn - 需要防抖的函数。
+ * @param {number} wait - 防抖的时间间隔，单位为毫秒。
+ * @returns {Function} - 返回一个新的函数，该函数在指定的时间间隔内只会执行一次。
+ */
+export default function debounce(fn, wait) {
+    // 用于存储定时器的变量
+    var timeout = null;
+    // 返回一个新的函数，该函数在指定的时间间隔内只会执行一次
+    return function (...arg) {
+        // 如果定时器已经存在，则清除定时器
+        if (timeout !== null)
+            clearTimeout(timeout);
+        // 设置新的定时器，在指定的时间间隔后执行传入的函数
+        timeout = setTimeout(() => fn.call(this, ...arg), wait);
+    }
+}