@bdsoft/element 1.1.0

package/src/components/pagination/scroll-to.js

@@ -0,0 +1,51 @@
+Math.easeInOutQuad = function (t, b, c, d) {
+    t /= d / 2
+    if (t < 1) {
+      return c / 2 * t * t + b
+    }
+    t--
+    return -c / 2 * (t * (t - 2) - 1) + b
+  }
+  
+  // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+  var requestAnimFrame = (function () {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60) }
+  })()
+  
+  // because it's so fucking difficult to detect the scrolling element, just move them all
+  function move (amount) {
+    document.documentElement.scrollTop = amount
+    document.body.parentNode.scrollTop = amount
+    document.body.scrollTop = amount
+  }
+  
+  function position () {
+    return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+  }
+  
+  export function scrollTo (to, duration, callback) {
+    const start = position()
+    const change = to - start
+    const increment = 20
+    let currentTime = 0
+    duration = (typeof (duration) === 'undefined') ? 500 : duration
+    var animateScroll = function () {
+      // increment the time
+      currentTime += increment
+      // find the value with the quadratic in-out easing function
+      var val = Math.easeInOutQuad(currentTime, start, change, duration)
+      // move the document.body
+      move(val)
+      // do the animation unless its over
+      if (currentTime < duration) {
+        requestAnimFrame(animateScroll)
+      } else {
+        if (callback && typeof (callback) === 'function') {
+          // the animation is done so lets callback
+          callback()
+        }
+      }
+    }
+    animateScroll()
+  }
+  

package/src/components/progress/bar.vue

@@ -0,0 +1,72 @@
+<!--
+* @FileDescription:  状态条
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<template>
+    <div class="status-bar-container" :style="containerStyle">
+        <div class="bar" v-for="index in barCount" :key="index" :style="barStyle"></div>
+    </div>
+</template>
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from "vue";
+const props = defineProps({
+    containerWidth: {
+        type: Number,
+        default: 80
+    },
+    bgcolor: {
+        type: String,
+        default: '#409eff'
+    },
+    barWidth: {
+        type: Number,
+        default: 3
+    },
+    barSpacing: {
+        type: Number,
+        default: 3
+    }
+})
+// const containerWidth = ref(200); // 容器宽度
+// const containerHeight = ref(40); // 容器高度
+const barWidth = ref(props.barWidth); // 长条宽度
+const barSpacing = ref(props.barSpacing); // 长条间隔
+
+const containerStyle = computed(() => ({
+    width: `100%`,
+    height: `100%`,
+    // backgroundColor: props.bgcolor, // 容器背景颜色，根据需要调整
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'stretch'
+}));
+
+const barCount = computed(() => {
+    // 计算可以放置多少个长条
+    const totalBarWidth = barWidth.value + barSpacing.value; // 单个长条总占用宽度
+    return Math.floor(props.containerWidth / totalBarWidth); // 计算可以放置的长条数量
+});
+
+const barStyle = computed(() => ({
+    width: `${barWidth.value}px`,
+    marginRight: `${barSpacing.value}px`,
+    backgroundColor: props.bgcolor // 长条颜色，根据需要调整
+}));
+
+</script>
+
+<style lang="scss" scoped>
+/* 容器和长条的基本样式 */
+.status-bar-container {
+    overflow: hidden;
+    /* 隐藏多余的长条 */
+}
+
+.bar {
+    height: 100%;
+    /* 长条高度充满容器 */
+}
+</style>

package/src/components/progress/progress.vue

@@ -0,0 +1,58 @@
+<!--
+* @FileDescription:  进度条内显示百分比标识
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<template>
+    <el-progress class="bd-progress" :color="bgcolor" :text-inside="true" striped :stroke-width="strokeWidth"
+        :percentage="percentage" />
+</template>
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from "vue";
+const props = defineProps({
+    width: {
+        type: Number,
+        default: 20
+    },
+    bgcolor: {
+        type: String,
+        default: '#409eff'
+    },
+    strokeWidth: {
+        type: Number,
+        default: 20
+    },
+    percentage: {
+        type: Number,
+        default: 50
+    }
+})
+
+const getColor = computed(() => {
+    let p = props.percentage
+    if (p < 30) {
+        return '#67c23a'
+    } else if (p < 50) {
+        return '#ffa724'
+    } else if (p > 70) {
+        return '#f56c6c'
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.bd-progress {
+    :deep(.el-progress-bar) {
+        .el-progress-bar__outer {
+            border-radius: 5px !important;
+            background-color: #07215c;
+
+            .el-progress-bar__inner {
+                border-radius: 5px !important;
+            }
+        }
+    }
+}
+</style>

package/src/components/screenfull/index.js

@@ -0,0 +1,3 @@
+import BdScreenfull from './index.vue'
+export default BdScreenfull;
+export { BdScreenfull as Screenfull } 

package/src/components/screenfull/index.vue

@@ -0,0 +1,65 @@
+
+<template>
+    <div>
+       <slot/>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
+  import screenfull from 'screenfull'
+  
+  // 定义响应式变量
+  const isFullscreen = ref(false)
+  
+  // 处理点击事件
+  const click = () => {
+    if (!screenfull.enabled) {
+      alert('你的浏览器不支持全屏模式')
+      return false
+    }
+    screenfull.toggle()
+  }
+  
+  // 处理全屏状态变化
+  const change = () => {
+    isFullscreen.value = screenfull.isFullscreen
+  }
+  
+  // 初始化事件监听
+  const init = () => {
+    if (screenfull.enabled) {
+      screenfull.on('change', change)
+    }
+  }
+  
+  // 销毁事件监听
+  const destroy = () => {
+    if (screenfull.enabled) {
+      screenfull.off('change', change)
+    }
+  }
+  
+  // 组件挂载时初始化
+  onMounted(() => {
+    init()
+  })
+  
+  // 组件卸载前销毁事件监听
+  onBeforeUnmount(() => {
+    destroy()
+  })
+  </script>
+  
+  <style scoped>
+  .screenfull-svg {
+    display: inline-block;
+    cursor: pointer;
+    fill: #5a5e66;
+    width: 20px;
+    height: 20px;
+    vertical-align: 10px;
+  }
+
+  </style>
+  

package/src/components/screenfull/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@bdsoft/element-screenfull",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "screenfull": "^6.0.2"
+  }
+}

package/src/components/screenfull/readme.md

@@ -0,0 +1,6 @@
+
+## 全屏组件
+
+```
+pnpm  install @bdsoft/element-screenfull
+```

package/src/components/statisticalCount/index.vue

@@ -0,0 +1,80 @@
+<!--
+* @FileDescription:  统计数组件
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<template>
+    <el-row style="height: 100%;width: 100%;border-radius: 10px;padding:0 10px;" :style="{ background: bgColor }">
+        <el-col :span="10">
+            <div
+                style="width: 100%;padding: 10px 0;display: flex;align-items: center;justify-content: center;">
+                <img :src="countIcon" alt="" height="30px">
+            </div>
+            <div style="height: 30px;width: 100%;display: flex;justify-content: center; line-height: 30px;text-align: center;color: #fff;">
+                <span>{{ countTitle }}</span>
+            </div>
+        </el-col>
+        <el-col :span="14" style="display: flex;align-items: center;justify-content: center;">
+            <div class="stepnum">
+                <count-up :id-name="idName" class="infor-intro-num user-created-count" id-name="idName3"
+                    :end-val="countNum" :countSize="1033" :countWeight="700"> </count-up>
+                <span class="dw">{{ countDw }}</span>
+            </div>
+        </el-col>
+    </el-row>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from "vue";
+
+// import countUp from '../coms/countup/countUp.vue';
+import countUp from '../countup/index.vue'
+const props = defineProps({
+    idName: {
+        type: String,
+        default: ''
+    },
+    countTitle: {
+        type: String,
+        default: ''
+    },
+    countIcon: {
+        type: String,
+        default: ''
+    },
+    countNum: {
+        type: Number,
+        default: 0,
+        require:true
+    },
+    countDw: {
+        type: String,
+        default: ''
+    },
+    bgColor: {
+        type: String,
+        default: '#0b2f6a'
+    }
+})
+
+</script>
+<style lang="scss" scoped>
+.stepnum {
+    color: #fff;
+    font-size: 32px;
+    font-weight: 700;
+
+    .infor-intro-num {
+        display: inline-block;
+    }
+
+    .dw {
+        font-size: 12px;
+        line-height: 1;
+        font-weight: normal;
+        margin-left: 5px;
+    }
+}
+</style>

package/src/components/statisticalCount/readme.md

@@ -0,0 +1,21 @@
+## 统计数组件
+
+
+```
+import { BdStatisticalCount } from '@bdsoft/element'
+
+ <el-row style="height: 100px;margin-bottom: 10px;">
+                        <el-col :span="12" style="padding: 10px;">
+                            <BdStatisticalCount :idName="'id1'" :countTitle="'云服务器'" :countIcon="'count/yfwq.png'"
+                                :countNum="statistics.servernum" :countDw="''"
+                                bgColor=" linear-gradient( 135deg, #FDD819 10%, #E80505 100%)">
+                            </BdStatisticalCount>
+                        </el-col>
+                        <el-col :span="12" style="padding: 10px;">
+                            <BdStatisticalCount :idName="'id3'" :countTitle="'专业软件'" :countIcon="'syslog/yingyong1.png'"
+                                :countNum="statistics.modulecount" :countDw="''"
+                                :bgColor="'linear-gradient( 135deg, #6B73FF 10%, #000DFF 100%)'">
+                            </BdStatisticalCount>
+                        </el-col>
+                    </el-row>
+```

package/src/components/username/index.vue

@@ -0,0 +1,79 @@
+<!--
+* @FileDescription:  名字组件
+* @Author: 李兵泉
+* @Date: 2025-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<template>
+  <div
+    class="name-container"
+    :style="{
+      backgroundColor: bgColor === 'random' ? getRandomColor() : bgColor,
+      color: textColor,
+      width: width,
+      height: height
+    }"
+  >
+    {{ displayName }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    // 定义背景颜色 传递random则随机生成颜色
+    bgColor: {
+      type: String,
+      default: '#007BFF'
+    },
+    // 定义文字颜色
+    textColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    // 定义组件的宽高
+    width: {
+      type: String,
+      default: '28px'
+    },
+    height: {
+      type: String,
+      default: '28px'
+    }
+  },
+  computed: {
+    displayName() {
+      return this.name.slice(-2)
+    }
+  },
+  methods: {
+    getRandomColor() {
+      const letters = '0123456789ABCDEF'
+      let color = '#'
+      for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)]
+      }
+      return color
+    }
+  }
+}
+</script>
+
+<style scoped>
+.name-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  font-size: 12px;
+  margin-right: 10px;
+  /* font-weight: bold; */
+}
+</style>

package/src/components/username/readme.md

@@ -0,0 +1,22 @@
+
+## 名字组件
+功能：
+1. 显示用户名称(后两位)
+2. 随机背景色(bgColor="random")
+3. 修改组件宽高
+
+使用方法：
+
+```
+import {  BdUserName } from '@bdsoft/element'
+
+
+ <el-table-column label="用户名称" prop="user_name" width="200" show-overflow-tooltip>
+<template #default="scope">
+    <span style="display: flex;  align-items: center">
+    <BdUserName :name="scope.row.user_name" bgColor="random"></BdUserName>
+    {{ scope.row.user_name }}
+    </span>
+</template>
+</el-table-column>
+```

package/src/index.js

@@ -0,0 +1,82 @@
+// 导出element 开发的相关的界面
+import BdEmpty from './components/empty/empty.vue'
+import BdInvalid from './components/empty/invalid.vue' // 无效页面组件
+import BdBuilding from './components/empty/building.vue'
+import BdBar from './components/layout/bar.vue'
+import BdNav from './components/layout/nav.vue'
+import BdBadge from './components/badge/index.vue'
+import BdLayout1 from './components/layout/layout1.vue'
+import BdLayout2 from './components/layout/layout2.vue'
+import BdLayout3 from './components/layout/layout3.vue'
+import BdLayout4 from './components/layout/layout4.vue'
+// 搜索框组件
+import HeadSearch from './xm_components/HeadSearch/index.vue'
+// 里程碑组件
+import Milestone from './xm_components/Milestone/index.vue'
+import BDCarousel from './components/carousel/index.vue'
+import BdFormItem from './components/form/FormItem.vue'
+import BdForm from './components/form/Form.vue'
+import Notice from './components/notice/NoticeList.vue'
+import NoticePage from './components/notice/NoticeListPaging.vue'
+import NoticeView from './components/notice/NoticeView.vue'
+// 完成提示动画组件
+import BdFinish from './components/basic/Finish.vue'
+// 计数组件
+import BdCountUp from './components/countup/index.vue'
+// 按钮组件
+import BdButton from './components/button/index.vue'
+// 进度条
+import BDProgress from './components/progress/progress.vue'
+import BDProgressBar from './components/progress/bar.vue'
+// 分页组件
+import BdPagination from './components/pagination/index.vue'
+// 词云组件
+import BdWordsCloud from './components/3dcloudwords/index.vue'
+// 右键菜单
+import BdContextMenu from './components/contextMenu/index.vue'
+// loading菜单
+import BdLoading from './components/loading/index.vue'
+// 异常页面
+import BdError from './components/error/Error.vue'
+// 名字组件
+import BdUserName from './components/username/index.vue'
+// 图表属性配置组件
+import BdChartConfig from './components/chartconfig/index.vue'
+// 统计数+图标组件
+import BdStatisticalCount from './components/statisticalCount/index.vue'
+
+
+export {
+    BdStatisticalCount,
+    BdBuilding,
+    BdChartConfig,
+    BdUserName,
+    BdError,
+    BdLoading,
+    BdContextMenu,
+    BdWordsCloud,
+    BdPagination,
+    BdNav,
+    BdBar,
+    BdBadge,
+    BdLayout1,
+    BdLayout2,
+    BdLayout3,
+    BdLayout4,
+    HeadSearch,
+    Milestone,
+    BdEmpty,
+    BdInvalid,
+    BDCarousel,
+    BDProgress,
+    BDProgressBar,
+    BdFormItem,
+    BdForm,
+    Notice,
+    NoticePage,
+    NoticeView,
+    BdButton,
+    BdCountUp,
+    BdFinish
+  }
+  

package/src/utils/index.js

@@ -0,0 +1,32 @@
+export const headerCellStyle = { color: '#999', backgroundColor: '#F5F6FA', height: '40px', fontSize: '14px', fontWeight: 'normal', color: '#666' }
+
+/**
+ * 日期格式化
+ * @param {*} time
+ * @param {*} format
+ * @returns
+ */
+export function parseTime(time, format) {
+    if (!time) return ''
+    var t = new Date(time)
+    var tf = function (i) {
+      return (i < 10 ? '0' : '') + i
+    }
+    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
+      switch (a) {
+        case 'yyyy':
+          return tf(t.getFullYear())
+        case 'MM':
+          return tf(t.getMonth() + 1)
+        case 'mm':
+          return tf(t.getMinutes())
+        case 'dd':
+          return tf(t.getDate())
+        case 'HH':
+          return tf(t.getHours())
+        case 'ss':
+          return tf(t.getSeconds())
+      }
+    })
+  }
+  

package/src/xm_components/HeadSearch/hook/hookSearch.js

@@ -0,0 +1,96 @@
+import { ref, reactive, onMounted, nextTick } from 'vue'
+
+/**
+ *
+ * @param {*} prefix 前缀，解决项目冲突
+ * @returns
+ */
+export default function useSearrch(prefix = '') {
+  const searchkeysArr = ref([])
+  const search_drop = ref(false)
+  const keyName = ref('')
+  /**
+   * 获取缓存搜索数据
+   * @returns
+   */
+  const getStorageKeys = () => {
+    var keys = localStorage.getItem('searchRerportkeys')
+
+    if (keys && keys !== 'undefined' && keys !== 'null') {
+      keys = JSON.parse(keys)
+      return keys
+    }
+    return []
+  }
+
+  /**
+   * 鼠标foucs
+   */
+  const focusfns = (type) => {
+    searchkeysArr.value = getStorageKeys()
+
+    if (type === 1 && searchkeysArr.value.length > 0) {
+      search_drop.value = true
+    } else {
+      setTimeout(function () {
+        nextTick(function () {
+          search_drop.value = false
+        })
+      }, 200)
+    }
+  }
+
+  /**
+   * 保存搜索记录
+   * @param {*} key
+   */
+  const setSearchKeys = (key) => {
+    if (!key || key == null || key == '' || key == 'null') return
+    let keys = localStorage.getItem('searchRerportkeys')
+
+    if (keys && keys !== 'undefined' && keys !== '{}') {
+      keys = JSON.parse(keys)
+
+      if (keys.length > 5 && keys instanceof Array) {
+        keys.splice(0, 1)
+      }
+      keys.push(key)
+
+      let keys2 = [...new Set(keys)]
+
+      localStorage.setItem('searchRerportkeys', JSON.stringify(keys2))
+    } else {
+      keys = []
+      keys.push(key)
+      localStorage.setItem('searchRerportkeys', JSON.stringify(keys))
+    }
+  }
+
+  // 在hookSearch.js中添加
+  const deleteSearchItem = (index) => {
+    debugger
+    // 删除数组中对应索引的记录
+    searchkeysArr.value.splice(index, 1)
+    // 同步更新本地存储
+    localStorage.setItem('searchRerportkeys', JSON.stringify(searchkeysArr.value))
+  }
+
+  /**
+   * 赋值文本
+   * @param {*} val
+   */
+  const setTxt = (val) => {
+    keyName.value = val
+  }
+
+  return {
+    keyName,
+    searchkeysArr,
+    search_drop,
+    focusfns,
+    setTxt,
+    deleteSearchItem,
+    setSearchKeys,
+    getStorageKeys
+  }
+}