@bdsoft/element 1.1.13 → 1.1.14

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.1.2",
+  "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/global/index.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue'
+import registerProperties from './register-properties'
+
+export function globalRegister(app: App): void {
+  app.use(registerProperties)
+}

package/src/global/register-properties.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+
+import { showsuccess, showerror, showwarning, showinfo } from '../utils/message.js'
+// App是用来确定类型
+export default function registerProperties(app: App) {
+  app.config.globalProperties.showsuccess = showsuccess
+  app.config.globalProperties.showerror = showerror
+  app.config.globalProperties.showwarning = showwarning
+  app.config.globalProperties.showinfo = showinfo
+}

package/src/index.js

@@ -0,0 +1,88 @@
+// 导出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 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'
+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,
+    StatisticalCard,
+    MultiStatisticalCard,
+    BdEmpty,
+    BdInvalid,
+    BDCarousel,
+    BDProgress,
+    BDProgressBar,
+    BdFormItem,
+    BdForm,
+    Notice,
+    NoticePage,
+    NoticeView,
+    BdButton,
+    BdCountUp,
+    BdFinish
+  }
+  

package/src/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/src/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/src/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
+  }
+}