@bdsoft/element 1.1.13 → 1.1.14

package/src/components/countup/countUp.js

@@ -0,0 +1,196 @@
+// target = id of html element or var of previously selected html element where counting occurs
+// startVal = the value you want to begin at
+// endVal = the value you want to arrive at
+// decimals = number of decimal places, default 0
+// duration = duration of animation in seconds, default 2
+// options = optional object of options (see below)
+
+var CountUp = function (target, startVal, endVal, decimals, duration, options) {
+    // make sure requestAnimationFrame and cancelAnimationFrame are defined
+    // polyfill for browsers without native support
+    // by Opera engineer Erik Möller
+    var lastTime = 0
+    var vendors = ['webkit', 'moz', 'ms', 'o']
+    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+      window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
+      window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']
+    }
+    if (!window.requestAnimationFrame) {
+      window.requestAnimationFrame = function (callback, element) {
+        var currTime = new Date().getTime()
+        var timeToCall = Math.max(0, 16 - (currTime - lastTime))
+        var id = window.setTimeout(function () {
+          callback(currTime + timeToCall)
+        }, timeToCall)
+        lastTime = currTime + timeToCall
+        return id
+      }
+    }
+    if (!window.cancelAnimationFrame) {
+      window.cancelAnimationFrame = function (id) {
+        clearTimeout(id)
+      }
+    }
+  
+    var self = this
+  
+    // default options
+    self.options = {
+      useEasing: true, // toggle easing
+      useGrouping: true, // 1,000,000 vs 1000000
+      separator: ',', // character to use as a separator
+      decimal: '.', // character to use as a decimal
+      easingFn: null, // optional custom easing closure function, default is Robert Penner's easeOutExpo
+      formattingFn: null // optional custom formatting function, default is self.formatNumber below
+    }
+    // extend default options with passed options object
+    for (var key in options) {
+      if (options.hasOwnProperty(key)) {
+        self.options[key] = options[key]
+      }
+    }
+    if (self.options.separator === '') {
+      self.options.useGrouping = false
+    }
+    if (!self.options.prefix) self.options.prefix = ''
+    if (!self.options.suffix) self.options.suffix = ''
+  
+    self.d = typeof target === 'string' ? document.getElementById(target) : target
+    self.startVal = Number(startVal)
+    self.endVal = Number(endVal)
+    self.countDown = self.startVal > self.endVal
+    self.frameVal = self.startVal
+    self.decimals = Math.max(0, decimals || 0)
+    self.dec = Math.pow(10, self.decimals)
+    self.duration = Number(duration) * 1000 || 2000
+  
+    self.formatNumber = function (nStr) {
+      nStr = nStr.toFixed(self.decimals)
+      nStr += ''
+      var x, x1, x2, rgx
+      x = nStr.split('.')
+      x1 = x[0]
+      x2 = x.length > 1 ? self.options.decimal + x[1] : ''
+      rgx = /(\d+)(\d{3})/
+      if (self.options.useGrouping) {
+        while (rgx.test(x1)) {
+          x1 = x1.replace(rgx, '$1' + self.options.separator + '$2')
+        }
+      }
+      return self.options.prefix + x1 + x2 + self.options.suffix
+    }
+    // Robert Penner's easeOutExpo
+    self.easeOutExpo = function (t, b, c, d) {
+      return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
+    }
+  
+    self.easingFn = self.options.easingFn ? self.options.easingFn : self.easeOutExpo
+    self.formattingFn = self.options.formattingFn ? self.options.formattingFn : self.formatNumber
+  
+    self.version = function () {
+      return '1.7.1'
+    }
+  
+    // Print value to target
+    self.printValue = function (value) {
+      var result = self.formattingFn(value)
+  
+      if (self.d?.tagName === 'INPUT') {
+        this.d.value = result
+      } else if (self.d?.tagName === 'text' || self.d?.tagName === 'tspan') {
+        this.d.textContent = result
+      } else {
+        this.d.innerHTML = result
+      }
+    }
+  
+    self.count = function (timestamp) {
+      if (!self.startTime) {
+        self.startTime = timestamp
+      }
+  
+      self.timestamp = timestamp
+      var progress = timestamp - self.startTime
+      self.remaining = self.duration - progress
+  
+      // to ease or not to ease
+      if (self.options.useEasing) {
+        if (self.countDown) {
+          self.frameVal = self.startVal - self.easingFn(progress, 0, self.startVal - self.endVal, self.duration)
+        } else {
+          self.frameVal = self.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration)
+        }
+      } else {
+        if (self.countDown) {
+          self.frameVal = self.startVal - (self.startVal - self.endVal) * (progress / self.duration)
+        } else {
+          self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration)
+        }
+      }
+  
+      // don't go past endVal since progress can exceed duration in the last frame
+      if (self.countDown) {
+        self.frameVal = self.frameVal < self.endVal ? self.endVal : self.frameVal
+      } else {
+        self.frameVal = self.frameVal > self.endVal ? self.endVal : self.frameVal
+      }
+  
+      // decimal
+      self.frameVal = Math.round(self.frameVal * self.dec) / self.dec
+  
+      // format and print value
+      self.printValue(self.frameVal)
+  
+      // whether to continue
+      if (progress < self.duration) {
+        self.rAF = requestAnimationFrame(self.count)
+      } else {
+        if (self.callback) {
+          self.callback()
+        }
+      }
+    }
+    // start your animation
+    self.start = function (callback) {
+      self.callback = callback
+      self.rAF = requestAnimationFrame(self.count)
+      return false
+    }
+    // toggles pause/resume animation
+    self.pauseResume = function () {
+      if (!self.paused) {
+        self.paused = true
+        cancelAnimationFrame(self.rAF)
+      } else {
+        self.paused = false
+        delete self.startTime
+        self.duration = self.remaining
+        self.startVal = self.frameVal
+        requestAnimationFrame(self.count)
+      }
+    }
+    // reset to startVal so animation can be run again
+    self.reset = function () {
+      self.paused = false
+      delete self.startTime
+      self.startVal = startVal
+      cancelAnimationFrame(self.rAF)
+      self.printValue(self.startVal)
+    }
+    // pass a new endVal and start animation
+    self.update = function (newEndVal) {
+      cancelAnimationFrame(self.rAF)
+      self.paused = false
+      delete self.startTime
+      self.startVal = self.frameVal
+      self.endVal = Number(newEndVal)
+      self.countDown = self.startVal > self.endVal
+      self.rAF = requestAnimationFrame(self.count)
+    }
+  
+    // format startVal on initialization
+    self.printValue(self.startVal)
+  }
+  
+  export { CountUp }
+  

package/src/components/countup/index.vue

@@ -0,0 +1,114 @@
+<!--
+* @FileDescription:  统计组件
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<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
+  },
+  endVal: {
+    type: Number,
+    default: 0
+  },
+  iconType: {
+    type: String,
+    default: ''
+  },
+  color: {
+    type: String,
+    default: '#3b3a3a' // D9524E
+  },
+  introText: {
+    type: String,
+    default: ''
+  },
+  docTypeText: {
+    type: String,
+    default: ''
+  },
+  countSize: {
+    type: String,
+    default: `30px`
+  },
+  countWeight: {
+    type: Number,
+    default: 700
+  },
+  delay: {
+    type: Number,
+    default: 500
+  }
+})
+const className = ref('')
+
+function transformValue (val) {
+  let endVal = 0
+  let unit = ''
+  if (val < 1000) {
+    endVal = val
+  } else if (val >= 1000 && val < 1000000) {
+    endVal = parseInt(val / 1000)
+    unit = 'K+'
+  } else if (val >= 1000000 && val < 10000000000) {
+    endVal = parseInt(val / 1000000)
+    unit = 'M+'
+  } else {
+    endVal = parseInt(val / 1000000000)
+    unit = 'B+'
+  }
+  return {
+    val: endVal,
+    unit: unit
+  }
+}
+let demo = {}
+
+watch(() => props.endVal, (val) => {
+  const endVal = val
+  if (demo.update) { demo.update(endVal) }
+})
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+
+      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()
+      }
+    }, props.delay)
+  })
+})
+
+</script>
+<template>
+  <div>
+    <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>

package/src/components/countup/readme.md

@@ -0,0 +1,9 @@
+# 动态计数组件
+11
+## 示例
+```
+import {BdCountUp} from '@bdsoft/element';
+  <count-up class="infor-intro-num user-created-count" id-name="idName3"
+    :end-val="statistics.moduleusecount" color="rgba(5, 76, 232, 1)" :countSize="1033" :countWeight="700">
+</count-up>
+```

package/src/components/empty/building.vue

@@ -0,0 +1,117 @@
+<!--
+* @FileDescription:  正在建设中
+* @Author: 李兵泉
+* @Date: 2025-03-24 
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  paddingTop: {
+    type: String,
+    default: '20%'
+  },
+  // 是自定义图片展示还是默认svg展示 img /svg
+  imgType: {
+    type: String,
+    default: 'img'
+  },
+  imgSize: {
+    type: Number,
+    default: 200
+  },
+  // 可以接收第三方URL地址
+  imgUrl: {
+    type: String,
+    default: ''
+  },
+  // 指定默认图
+  imgName: {
+    type: String,
+    default: 'build.png'
+  },
+  // 图片的高
+  imgHeight: {
+    type: String,
+    default: '506px'
+  },
+  // 图片的宽
+  imgWidth: {
+    type: String,
+    default: '900px'
+  },
+  // 支持缩放
+  scale: {
+    type: Number,
+    default: 1
+  },
+  // svg的描述
+  des:{
+    type: String,
+    default: ''
+  }
+});
+
+const imgUrlPath = computed(() => {
+  if (props.imgUrl) {
+    return props.imgUrl;
+  } else if (props.imgName) {
+    return new URL(`./assets/${props.imgName}`, import.meta.url).href;
+  }
+  // return props.imgUrl? props.imgUrl :  new URL('./assets/emptybg2.jpg', import.meta.url).href ;
+});
+</script>
+<template>
+  <div ref="emptywarpRef" id="emptywarp">
+    
+    <div  style="width: 820px; margin: 0 auto; overflow: hidden;text-align:center" >
+      <img id="bdelogo" class="menubar" ref="bdlogoRef" :src="imgUrlPath" alt=""
+        :style="{ marginTop: props.paddingTop, height: props.imgHeight, width: props.imgWidth ,transform: `scale(${scale})`}" />
+        <br/>
+        <span style="color: #bec0c3;font-size: 20px;">{{ des }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#emptywarp {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  transform-style: preserve-3d;
+  perspective: 200px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+#bdelogo {
+  margin: auto;
+  width: 715px;
+  height: 493px;
+  transform-style: preserve-3d;
+  transition: all 0.2s;
+}
+
+.menubar {
+//   animation: im_icon 2s linear infinite;
+}
+
+@keyframes im_icon {
+  0% {
+    // opacity: 0.8;
+    transform: translate(0, 0);
+  }
+
+  50% {
+    // opacity: 1;
+    transform: translate(0, 5px);
+  }
+
+  100% {
+    // opacity: 0.8;
+    transform: translate(0, 0);
+  }
+}
+</style>

package/src/components/empty/empty.vue

@@ -0,0 +1,120 @@
+<!--
+* @FileDescription:  空页面  数据未加载前显示 后续可完善能动态元素的效果
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  paddingTop: {
+    type: String,
+    default: '20%'
+  },
+  // 是自定义图片展示还是默认svg展示 img /svg
+  imgType: {
+    type: String,
+    default: 'img'
+  },
+  imgSize: {
+    type: Number,
+    default: 200
+  },
+  // 可以接收第三方URL地址
+  imgUrl: {
+    type: String,
+    default: ''
+  },
+  // 指定默认图
+  imgName: {
+    type: String,
+    default: 'emptybg.png'
+  },
+  // 图片的高
+  imgHeight: {
+    type: String,
+    default: '493px'
+  },
+  // 图片的宽
+  imgWidth: {
+    type: String,
+    default: '715px'
+  },
+  // 支持缩放
+  scale: {
+    type: Number,
+    default: 1
+  },
+  // svg的描述
+  des:{
+    type: String,
+    default: '无数据'
+  }
+});
+
+const imgUrlPath = computed(() => {
+  if (props.imgUrl) {
+    return props.imgUrl;
+  } else if (props.imgName) {
+    return new URL(`./assets/${props.imgName}`, import.meta.url).href;
+  }
+  // return props.imgUrl? props.imgUrl :  new URL('./assets/emptybg2.jpg', import.meta.url).href ;
+});
+</script>
+<template>
+  <div ref="emptywarpRef" id="emptywarp">
+    <div v-if="imgType == 'svg'" style="width: 420px; margin: 0 auto; overflow: hidden" >
+      <el-empty :image-size="imgSize" :description="des" />
+    </div>
+   
+    <div v-else style="width: 820px; margin: 0 auto; overflow: hidden;text-align:center" >
+      <img id="bdelogo" class="menubar" ref="bdlogoRef" :src="imgUrlPath" alt=""
+        :style="{ marginTop: props.paddingTop, height: props.imgHeight, width: props.imgWidth ,transform: `scale(${scale})`}" />
+        <br/>
+        <span style="color: #bec0c3;font-size: 20px;">{{ des }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#emptywarp {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  transform-style: preserve-3d;
+  perspective: 200px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+#bdelogo {
+  margin: auto;
+  width: 715px;
+  height: 493px;
+  transform-style: preserve-3d;
+  transition: all 0.2s;
+}
+
+.menubar {
+  animation: im_icon 2s linear infinite;
+}
+
+@keyframes im_icon {
+  0% {
+    // opacity: 0.8;
+    transform: translate(0, 0);
+  }
+
+  50% {
+    // opacity: 1;
+    transform: translate(0, 5px);
+  }
+
+  100% {
+    // opacity: 0.8;
+    transform: translate(0, 0);
+  }
+}
+</style>

package/src/components/empty/index.js

@@ -0,0 +1,12 @@
+import _Empty from './empty.vue'
+// 全局挂载组件
+const withInstall = (comp) => {
+  comp.install = (app) => {
+    const name = comp.name
+    //注册组件
+    app.component(name, comp)
+  }
+  return comp
+}
+
+export const BdEmpty = withInstall(_Empty)

package/src/components/empty/invalid.vue

@@ -0,0 +1,56 @@
+<!--
+* @FileDescription:  空页面  数据未加载前显示 后续可完善能动态元素的效果
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<script setup>
+import { computed } from "vue";
+import empty  from "./empty.vue";
+</script>
+<template>
+  <empty imgName="wuxiao.png" imgWidth="100%" des="" imgHeight="auto"></empty>
+</template>
+
+<style lang="scss" scoped>
+#emptywarp {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  transform-style: preserve-3d;
+  perspective: 200px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+#bdelogo {
+  margin: auto;
+  width: 715px;
+  height: 493px;
+  transform-style: preserve-3d;
+  transition: all 0.2s;
+}
+
+.menubar {
+  animation: im_icon 2s linear infinite;
+}
+
+@keyframes im_icon {
+  0% {
+    // opacity: 0.8;
+    transform: translate(0, 0);
+  }
+
+  50% {
+    // opacity: 1;
+    transform: translate(0, 5px);
+  }
+
+  100% {
+    // opacity: 0.8;
+    transform: translate(0, 0);
+  }
+}
+</style>